Tweaks

src/js/config/defaults.js

@@ -407,9 +407,6 @@ const defaults = {
         tagUrl: '',
     },
 
-    // YouTube nocookies mode
-    noCookie: false,
-
     // Preview Thumbnails plugin
     previewThumbnails: {
         enabled: false,
@@ -424,6 +421,15 @@ const defaults = {
         speed: true,
         transparent: false,
     },
+
+    // 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)
+    },
 };
 
 export default defaults;

src/js/plugins/previewThumbnails.js

@@ -223,8 +223,8 @@ class PreviewThumbnails {
 
         // Show scrubbing preview
         on.call(this.player, this.player.elements.progress, 'mousedown touchstart', event => {
-            // Only act on left mouse button (0), or touch device (!event.button)
-            if (!event.button || event.button === 0) {
+            // Only act on left mouse button (0), or touch device (event.button is false)
+            if (event.button === false || event.button === 0) {
                 this.mouseDown = true;
                 // Wait until media has a duration
                 if (this.player.media.duration) {

src/js/plugins/vimeo.js

@@ -10,6 +10,7 @@ import { triggerEvent } from '../utils/events';
 import fetch from '../utils/fetch';
 import is from '../utils/is';
 import loadScript from '../utils/loadScript';
+import { extend } from '../utils/objects';
 import { format, stripHTML } from '../utils/strings';
 import { setAspectRatio } from '../utils/style';
 import { buildUrlParams } from '../utils/urls';
@@ -64,21 +65,22 @@ const vimeo = {
     // API Ready
     ready() {
         const player = this;
+        const config = player.config.vimeo;
 
         // Get Vimeo params for the iframe
-        const options = {
-            loop: player.config.loop.active,
-            autoplay: player.autoplay,
-            muted: player.muted,
-            byline: player.config.vimeo.byline,
-            portrait: player.config.vimeo.portrait,
-            title: player.config.vimeo.title,
-            speed: player.config.vimeo.speed,
-            transparent: player.config.vimeo.transparent === true ? 1 : 0,
-            gesture: 'media',
-            playsinline: !this.config.fullscreen.iosNative,
-        };
-        const params = buildUrlParams(options);
+        const params = buildUrlParams(
+            extend(
+                {},
+                {
+                    loop: player.config.loop.active,
+                    autoplay: player.autoplay,
+                    muted: player.muted,
+                    gesture: 'media',
+                    playsinline: !this.config.fullscreen.iosNative,
+                },
+                config,
+            ),
+        );
 
         // Get the source URL or ID
         let source = player.media.getAttribute('src');

src/js/plugins/youtube.js

@@ -9,6 +9,7 @@ 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';
 
@@ -144,30 +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,
-            host: player.config.noCookie ? 'https://www.youtube-nocookie.com' : undefined,
-            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

src/js/plyr.js

@@ -188,7 +188,7 @@ class Plyr {
                         // YouTube requires the playsinline in the URL
                         if (this.isYouTube) {
                             this.config.playsinline = truthy.includes(url.searchParams.get('playsinline'));
-                            this.config.hl = url.searchParams.get('hl'); // TODO: Should this be setting language?
+                            this.config.youtube.hl = url.searchParams.get('hl'); // TODO: Should this be setting language?
                         } else {
                             this.config.playsinline = true;
                         }

src/js/utils/events.js

@@ -73,10 +73,10 @@ export function off(element, events = '', callback, passive = true, capture = fa
 
 // Bind once-only event handler
 export function once(element, events = '', callback, passive = true, capture = false) {
-    function onceCallback(...args) {
+    const onceCallback = (...args) => {
         off(element, events, onceCallback, passive, capture);
         callback.apply(this, args);
-    }
+    };
 
     toggleListener.call(this, element, events, onceCallback, true, passive, capture);
 }
@@ -114,7 +114,7 @@ export function unbindListeners() {
 
 // Run method when / if player is ready
 export function ready() {
-    return new Promise(
-        resolve => (this.ready ? setTimeout(resolve, 0) : on.call(this, this.elements.container, 'ready', resolve)),
+    return new Promise(resolve =>
+        this.ready ? setTimeout(resolve, 0) : on.call(this, this.elements.container, 'ready', resolve),
     ).then(() => {});
 }