Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
YouTube.com "big theater mode" injection. Gives the video full height when in theater mode.
(function() {
var coverNavBar = true;
var css = `
ytd-watch:not([fullscreen])[theater] #player.ytd-watch {
height: ` + (coverNavBar?'':'calc(') + '100vh' + (coverNavBar?'':' - 56px)') + ` !important;
max-height: none !important;` + (coverNavBar?`
position: relative;
margin-top: -56px;
z-index: 9999;
`:'') + `
}`;
if (coverNavBar) {
css += `
ytd-page-manager, ytd-watch {
overflow: visible !important;
}
`;
}
var cssDiv = document.createElement('div');
cssDiv.innerHTML = '&shy;<style>' + css + '</style>';
document.body.appendChild(cssDiv.childNodes[1]);
})();
  • How to show navigation bar: set var coverNavBar = true; to var coverNavBar = false;.
  • How to create bookmarklet: Visit https://mrcoles.com/bookmarklet/ and paste the below youtube_big_theater_mode_injection.js code into the javascript input box.
  • How to directly inject into website: Type javascript: into the url field, followed by the below youtube_big_theater_mode_injection.js code.

Known Bugs:

  • If already in "Theater Mode", the video wont properly scale, you need to exit and re-enter "Theater Mode" or enter and exit "Fullscreen" mode to fix the scaling issue.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.