diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js index 1101fd97..8bc7ebe7 100644 --- a/demo/src/js/demo.js +++ b/demo/src/js/demo.js @@ -59,9 +59,11 @@ import toggleClass from './toggle-class'; }, previewThumbnails: { enabled: true, + customControls: true, src: ['https://cdn.plyr.io/static/demo/thumbs/100p.vtt', 'https://cdn.plyr.io/static/demo/thumbs/240p.vtt'], }, vimeo: { + customControls: true, // Prevent Vimeo blocking plyr.io demo site referrerPolicy: 'no-referrer', }, diff --git a/src/js/config/defaults.js b/src/js/config/defaults.js index fae59619..80ab190f 100644 --- a/src/js/config/defaults.js +++ b/src/js/config/defaults.js @@ -422,20 +422,23 @@ const defaults = { title: false, speed: true, transparent: false, + // Custom settings from Plyr + customControls: false, + referrerPolicy: null, // https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy // Whether the owner of the video has a Pro or Business account // (which allows us to properly hide controls without CSS hacks, etc) premium: false, - // Custom settings from Plyr - referrerPolicy: null, // https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy }, // YouTube plugin youtube: { - noCookie: false, // Whether to use an alternative version of YouTube without cookies rel: 0, // No related vids showinfo: 0, // Hide info iv_load_policy: 3, // Hide annotations modestbranding: 1, // Hide logos as much as possible (they still show one in the corner when paused) + // Custom settings from Plyr + customControls: false, + noCookie: false, // Whether to use an alternative version of YouTube without cookies }, }; diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 2e12d160..cd19b097 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -112,31 +112,35 @@ const vimeo = { } // Inject the package - const { poster } = player; - if (premium) { - iframe.setAttribute('data-poster', poster); + if (premium || !config.customControls) { + iframe.setAttribute('data-poster', player.poster); player.media = replaceElement(iframe, player.media); } else { - const wrapper = createElement('div', { class: player.config.classNames.embedContainer, 'data-poster': poster }); + const wrapper = createElement('div', { + class: player.config.classNames.embedContainer, + 'data-poster': player.poster, + }); wrapper.appendChild(iframe); player.media = replaceElement(wrapper, player.media); } // Get poster image - fetch(format(player.config.urls.vimeo.api, id), 'json').then((response) => { - if (is.empty(response)) { - return; - } + if (!config.customControls) { + fetch(format(player.config.urls.vimeo.api, id), 'json').then((response) => { + if (is.empty(response)) { + return; + } - // Get the URL for thumbnail - const url = new URL(response[0].thumbnail_large); + // Get the URL for thumbnail + const url = new URL(response[0].thumbnail_large); - // Get original image - url.pathname = `${url.pathname.split('_')[0]}.jpg`; + // Get original image + url.pathname = `${url.pathname.split('_')[0]}.jpg`; - // Set and show poster - ui.setPoster.call(player, url.href).catch(() => {}); - }); + // Set and show poster + ui.setPoster.call(player, url.href).catch(() => {}); + }); + } // Setup instance // https://github.com/vimeo/player.js @@ -407,7 +411,9 @@ const vimeo = { }); // Rebuild UI - setTimeout(() => ui.build.call(player), 0); + if (config.customControls) { + setTimeout(() => ui.build.call(player), 0); + } }, }; diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js index 88601d5e..cc604e38 100644 --- a/src/js/plugins/youtube.js +++ b/src/js/plugins/youtube.js @@ -104,6 +104,7 @@ const youtube = { // API ready ready() { const player = this; + const config = player.config.youtube; // Ignore already setup (race condition) const currentId = player.media && player.media.getAttribute('id'); if (!is.empty(currentId) && currentId.startsWith('youtube-')) { @@ -121,29 +122,26 @@ const youtube = { // Replace the