☰

Allow full screen for YouTube embedded videos

Always allow full screen for YouTube embedded videos that don't allow it by default

  1. // ==UserScript==
  2. // @name     Allow full screen for YouTube embedded videos
  3. // @description     Always allow full screen for YouTube embedded videos that don't allow it by default
  4. // @version  1
  5. // @match    https://*/*
  6. // @exclude  *://youtube.com/embed/*
  7. // @exclude  *://*.youtube.com/embed/*
  8. // @namespace https://greasyfork.org/users/4654
  9. // ==/UserScript==
  10.  
  11. /*jshint esversion:6 */
  12.  
  13. ;(function AddFullScreenToEmbeddedVideos() {
  14.   "use strict";
  15.   let utils = {
  16.     $$: (selector, _parent = document.body) => 
  17.       _parent.matches(selector) ? [_parent] : [..._parent.querySelectorAll(selector)],  // return as a JS Array instead of a NodeList
  18.  
  19.     concurrent: (job) =>
  20.       (window.requestIdleCallback || window.requestAnimationFrame || window.setTimeout)(job),
  21.  
  22.     isElement: (any) => typeof any === "object" && any.nodeType === Node.ELEMENT_NODE
  23.   };
  24.  
  25.   let YT_IFRAME_SELECTORS = [
  26.       "youtube.com", "youtube-nocookie.com"
  27.     ]
  28.     .map((url) => `iframe[src*="${url}/embed/"]:not(allowfullscreen)`)
  29.     .join(",");
  30.  
  31.   let selectVideoIFrames = (parent) => utils.$$(YT_IFRAME_SELECTORS, parent);
  32.   
  33.   let addFullScreen = (videoFrame) => {
  34.     console.debug('adding fullscreen to iframe', videoFrame);
  35.     videoFrame.allowFullscreen = true;
  36.     videoFrame.src = videoFrame.src; // to force a reload of the iframe
  37.   };
  38.  
  39.  
  40.   let onDomMutation = (mutationList) =>
  41.     mutationList.forEach((mutation) =>
  42.       [...mutation.addedNodes].filter(utils.isElement)
  43.                          .flatMap(selectVideoIFrames)
  44.                          .forEach((iframe) => utils.concurrent(addFullScreen(iframe)))
  45.     );
  46.  
  47.   let start = () => {
  48.     selectVideoIFrames().forEach(addFullScreen);
  49.  
  50.     var observer = new MutationObserver(onDomMutation);
  51.     observer.observe(document.body, {subtree: true, childList: true});
  52.   }
  53.  
  54.   window.addEventListener("load", start);
  55.   console.debug("Loaded script:", GM.info.script.name);
  56.  
  57. })()