diff options
Diffstat (limited to 'src/js/plugins/youtube.js')
-rw-r--r-- | src/js/plugins/youtube.js | 50 |
1 files changed, 23 insertions, 27 deletions
diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js index 73175c14..d5972c80 100644 --- a/src/js/plugins/youtube.js +++ b/src/js/plugins/youtube.js @@ -9,7 +9,9 @@ import fetch from '../utils/fetch'; import is from '../utils/is'; import loadImage from '../utils/loadImage'; import loadScript from '../utils/loadScript'; +import { extend } from '../utils/objects'; import { format, generateId } from '../utils/strings'; +import { setAspectRatio } from '../utils/style'; // Parse YouTube ID from URL function parseId(url) { @@ -38,7 +40,7 @@ const youtube = { toggleClass(this.elements.wrapper, this.config.classNames.embed, true); // Set aspect ratio - youtube.setAspectRatio.call(this); + setAspectRatio.call(this); // Setup API if (is.object(window.YT) && is.function(window.YT.Player)) { @@ -98,12 +100,6 @@ const youtube = { } }, - // Set aspect ratio - setAspectRatio() { - const ratio = this.config.ratio.split(':'); - this.elements.wrapper.style.paddingBottom = `${100 / ratio[0] * ratio[1]}%`; - }, - // API ready ready() { const player = this; @@ -134,7 +130,7 @@ const youtube = { player.media = replaceElement(container, player.media); // Id to poster wrapper - const posterSrc = format => `https://img.youtube.com/vi/${videoId}/${format}default.jpg`; + const posterSrc = format => `https://i.ytimg.com/vi/${videoId}/${format}default.jpg`; // Check thumbnail images in order of quality, but reject fallback thumbnails (120px wide) loadImage(posterSrc('maxres'), 121) // Higest quality and unpadded @@ -149,29 +145,29 @@ const youtube = { }) .catch(() => {}); + const config = player.config.youtube; + // Setup instance // https://developers.google.com/youtube/iframe_api_reference player.embed = new window.YT.Player(id, { videoId, - playerVars: { - autoplay: player.config.autoplay ? 1 : 0, // Autoplay - hl: player.config.hl, // iframe interface language - controls: player.supported.ui ? 0 : 1, // Only show controls if not fully supported - 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) - disablekb: 1, // Disable keyboard as we handle it - playsinline: 1, // Allow iOS inline playback - - // Tracking for stats - // origin: window ? `${window.location.protocol}//${window.location.host}` : null, - widget_referrer: window ? window.location.href : null, - - // Captions are flaky on YouTube - cc_load_policy: player.captions.active ? 1 : 0, - cc_lang_pref: player.config.captions.language, - }, + host: config.noCookie ? 'https://www.youtube-nocookie.com' : undefined, + playerVars: extend( + {}, + { + autoplay: player.config.autoplay ? 1 : 0, // Autoplay + hl: player.config.hl, // iframe interface language + controls: player.supported.ui ? 0 : 1, // Only show controls if not fully supported + disablekb: 1, // Disable keyboard as we handle it + playsinline: !player.config.fullscreen.iosNative ? 1 : 0, // Allow iOS inline playback + // Captions are flaky on YouTube + cc_load_policy: player.captions.active ? 1 : 0, + cc_lang_pref: player.config.captions.language, + // Tracking for stats + widget_referrer: window ? window.location.href : null, + }, + config, + ), events: { onError(event) { // YouTube may fire onError twice, so only handle it once |