10

Currently, embedded YouTube videos don't allow you to fullscreen them. Clicking the button shows the frustrating message

Fullscreen is unavailable

An example answer on different site with an embedded video (embedding isn't enabled here on Meta Stack Exchange).

It looks like this is really easy to fix, see for example https://www.allowfullscreen.com/youtube. Could this be enabled?

2
  • This probably works differently for different browsers. On FF Android I have no button, but the title appears; clicking on that takes me to YT where I have all controls enabled.
    – Rob
    Commented Jan 12, 2019 at 17:25
  • @Rob you have to first play the video, only then the button will appear. Commented Dec 25, 2023 at 12:47

1 Answer 1

4

As always, user script to the rescue:

// ==UserScript==
// @name     Stack Exchange: Fullscreen YouTube
// @grant    none
// @run-at   document-start
// @match    https://*.stackexchange.com/*
// @match    https://*.superuser.com/*
// @match    https://*.stackoverflow.com/*
// @match    https://*.mathoverflow.net/*
// @match    https://*.serverfault.com/*
// @match    https://*.askubuntu.com/*
// @match    https://stackapps.com/*
// @exclude  https://chat.stackexchange.com/*
// @exclude  https://api.stackexchange.com/*
// @exclude  https://data.stackexchange.com/*
// @exclude  https://openid.stackexchange.com/*
// @exclude  https://area51.stackexchange.com/*
// @exclude  https://stackexchange.com/*
// @exclude  https://contests.stackoverflow.com/*
// @exclude  /^https?:\/\/winterbash\d{4,}\.stackexchange\.com\//
// ==/UserScript==

const SELECTOR = 'iframe[src*="youtube"]';

const fixupNode = node => {
  if (!node.matches?.(SELECTOR))
    return;

  const src = new URL(node.src);
  if (!/(^|\.)youtube(?:-nocookie)?\.com$/.test(src.host))
    return;
  
  node.allowFullscreen = true;
};

const fixupUnder = node => {
  fixupNode(node);
  for (const subnode of node.querySelectorAll(SELECTOR))
    fixupNode(subnode);
}

if (document.body)
  fixupUnder(document.body);

new MutationObserver(mutations => {
  for (const mut of mutations) {
    switch (mut.type) {
      case 'attributes':
        fixupNode(mut.target);
        break;
      case 'childList':
        fixupUnder(mut.target);
        break;
    }
  }
}).observe(document, {
  childList: true,
  attributes: true,
  attributeFilter: ['src'],
  subtree: true,
});
2
  • 1
    Nitpicking, the last @exclude is obsolete, winter bash is no more. Commented Dec 25, 2023 at 12:23
  • 1
    Winter Bash is no more, but the edition sites are still up, and they are not Q&A sites. So, not obsolete. Commented Dec 25, 2023 at 15:09

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .