Skip to content

Instantly share code, notes, and snippets.

@alaa13212
Created July 13, 2022 16:11
Show Gist options
  • Select an option

  • Save alaa13212/4c9e128ec5ca1dd9c4d165ebb7dcea73 to your computer and use it in GitHub Desktop.

Select an option

Save alaa13212/4c9e128ec5ca1dd9c4d165ebb7dcea73 to your computer and use it in GitHub Desktop.
Youtube Ultrawide 21:9 user script
let controlsParent = document.getElementsByClassName('ytp-right-controls')[0];
let buttonHtml = '<button class="ytp-ratio-button ytp-button" aria-label="Ratio" title="Ratio"><svg height="100%" version="1.1" viewBox="0 0 24 24" width="100%" transform="scale(0.75)"> <use class="ytp-svg-shadow" xlink:href="#ytp-id-1234"></use> <path d="M2 4h20v16H2V4zm2 14h16V6H4v12zM8 8h2v2H8v2H6V8h2zm8 8h-2v-2h2v-2h2v4h-2z" fill="#fff" fill-rule="evenodd" id="ytp-id-1234"/> </svg></button>';
controlsParent.children[controlsParent.children.length - 2]
.insertAdjacentHTML("afterEnd", buttonHtml);
const video = document.querySelector('video.html5-main-video');
let globalScale = 1;
const sheet = new CSSStyleSheet();
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
video.classList.add('yt-ultrawide');
let newButton = controlsParent.children[controlsParent.children.length - 2];
newButton.onclick = function() {
globalScale = globalScale === 1 ? 1.35 : 1;
sheet.replaceSync(`
.yt-ultrawide {
transition: transform 200ms ease 0s;
transform: scale(${globalScale});
}
`);
};
newButton.onwheel = function(evt) {
evt.preventDefault();
globalScale = globalScale + evt.deltaY / 2415;
globalScale = Math.min(Math.max(globalScale, 1), 2.5);
sheet.replaceSync(`
.yt-ultrawide {
transform: scale(${globalScale});
}
`);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment