Progressively enhance <iframe> embeds
This commit is contained in:
Sam Potts
@ -8,19 +8,12 @@ import ui from './../ui';
|
||||
|
||||
const vimeo = {
|
||||
setup() {
|
||||
// Remove old containers
|
||||
const containers = utils.getElements.call(this, `[id^="${this.provider}-"]`);
|
||||
Array.from(containers).forEach(utils.removeElement);
|
||||
|
||||
// Add embed class for responsive
|
||||
utils.toggleClass(this.elements.wrapper, this.config.classNames.embed, true);
|
||||
|
||||
// Set intial ratio
|
||||
vimeo.setAspectRatio.call(this);
|
||||
|
||||
// Set ID
|
||||
this.media.setAttribute('id', utils.generateId(this.provider));
|
||||
|
||||
// Load the API if not already
|
||||
if (!utils.is.object(window.Vimeo)) {
|
||||
utils.loadScript(this.config.urls.vimeo.api, () => {
|
||||
@ -57,15 +50,21 @@ const vimeo = {
|
||||
transparent: 0,
|
||||
gesture: 'media',
|
||||
};
|
||||
const params = utils.buildUrlParameters(options);
|
||||
const id = utils.parseVimeoId(player.embedId);
|
||||
const params = utils.buildUrlParams(options);
|
||||
const id = utils.parseVimeoId(player.media.getAttribute('src'));
|
||||
|
||||
// Build an iframe
|
||||
const iframe = utils.createElement('iframe');
|
||||
const src = `https://player.vimeo.com/video/${id}?${params}`;
|
||||
iframe.setAttribute('src', src);
|
||||
iframe.setAttribute('allowfullscreen', '');
|
||||
player.media.appendChild(iframe);
|
||||
iframe.setAttribute('allowtransparency', '');
|
||||
iframe.setAttribute('allow', 'autoplay');
|
||||
|
||||
// Inject the package
|
||||
const wrapper = utils.createElement('div');
|
||||
wrapper.appendChild(iframe);
|
||||
player.media = utils.replaceElement(wrapper, player.media);
|
||||
|
||||
// Setup instance
|
||||
// https://github.com/vimeo/player.js
|
||||
|
||||
@ -8,24 +8,15 @@ import ui from './../ui';
|
||||
|
||||
const youtube = {
|
||||
setup() {
|
||||
const videoId = utils.parseYouTubeId(this.embedId);
|
||||
|
||||
// Remove old containers
|
||||
const containers = utils.getElements.call(this, `[id^="${this.provider}-"]`);
|
||||
Array.from(containers).forEach(utils.removeElement);
|
||||
|
||||
// Add embed class for responsive
|
||||
utils.toggleClass(this.elements.wrapper, this.config.classNames.embed, true);
|
||||
|
||||
// Set aspect ratio
|
||||
youtube.setAspectRatio.call(this);
|
||||
|
||||
// Set ID
|
||||
this.media.setAttribute('id', utils.generateId(this.provider));
|
||||
|
||||
// Setup API
|
||||
if (utils.is.object(window.YT)) {
|
||||
youtube.ready.call(this, videoId);
|
||||
if (utils.is.object(window.YT) && utils.is.function(window.YT.Player)) {
|
||||
youtube.ready.call(this);
|
||||
} else {
|
||||
// Load the API
|
||||
utils.loadScript(this.config.urls.youtube.api);
|
||||
@ -36,7 +27,7 @@ const youtube = {
|
||||
|
||||
// Add to queue
|
||||
window.onYouTubeReadyCallbacks.push(() => {
|
||||
youtube.ready.call(this, videoId);
|
||||
youtube.ready.call(this);
|
||||
});
|
||||
|
||||
// Set callback to process queue
|
||||
@ -49,7 +40,7 @@ const youtube = {
|
||||
},
|
||||
|
||||
// Get the media title
|
||||
getTitle() {
|
||||
getTitle(videoId) {
|
||||
// Try via undocumented API method first
|
||||
// This method disappears now and then though...
|
||||
// https://github.com/sampotts/plyr/issues/709
|
||||
@ -65,7 +56,6 @@ const youtube = {
|
||||
|
||||
// Or via Google API
|
||||
const key = this.config.keys.google;
|
||||
const videoId = utils.parseYouTubeId(this.embedId);
|
||||
if (utils.is.string(key) && !utils.is.empty(key)) {
|
||||
const url = `https://www.googleapis.com/youtube/v3/videos?id=${videoId}&key=${key}&fields=items(snippet(title))&part=snippet`;
|
||||
|
||||
@ -88,12 +78,24 @@ const youtube = {
|
||||
},
|
||||
|
||||
// API ready
|
||||
ready(videoId) {
|
||||
ready() {
|
||||
const player = this;
|
||||
|
||||
// Ignore already setup (race condition)
|
||||
const currentId = player.media.getAttribute('id');
|
||||
if (!utils.is.empty(currentId) && currentId.startsWith('youtube-')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Replace the <iframe> with a <div> due to YouTube API issues
|
||||
const videoId = utils.parseYouTubeId(player.media.getAttribute('src'));
|
||||
const id = utils.generateId(player.provider);
|
||||
const container = utils.createElement('div', { id });
|
||||
player.media = utils.replaceElement(container, player.media);
|
||||
|
||||
// Setup instance
|
||||
// https://developers.google.com/youtube/iframe_api_reference
|
||||
player.embed = new window.YT.Player(player.media.id, {
|
||||
player.embed = new window.YT.Player(id, {
|
||||
videoId,
|
||||
playerVars: {
|
||||
autoplay: player.config.autoplay ? 1 : 0, // Autoplay
|
||||
@ -110,8 +112,8 @@ const youtube = {
|
||||
widget_referrer: window && window.location.href,
|
||||
|
||||
// Captions are flaky on YouTube
|
||||
cc_load_policy: this.captions.active ? 1 : 0,
|
||||
cc_lang_pref: this.config.captions.language,
|
||||
cc_load_policy: player.captions.active ? 1 : 0,
|
||||
cc_lang_pref: player.config.captions.language,
|
||||
},
|
||||
events: {
|
||||
onError(event) {
|
||||
@ -179,7 +181,7 @@ const youtube = {
|
||||
const instance = event.target;
|
||||
|
||||
// Get the title
|
||||
youtube.getTitle.call(player);
|
||||
youtube.getTitle.call(player, videoId);
|
||||
|
||||
// Create a faux HTML5 API using the YouTube API
|
||||
player.media.play = () => {
|
||||
|
||||
Reference in New Issue
Block a user