YouTube aspect ratio switcher

Adds an aspect ratio switcher to the player, for videos that have the wrong aspect ratio.
Zeptejte se na otázku, přidejte recenzi nebo skript nahlašte.
Wrap lines
// ==UserScript==
// @name         YouTube aspect ratio switcher
// @namespace    https://greasyfork.org/en/users/27283-mutationobserver
// @version      2023.02.01v5
// @description  Adds an aspect ratio switcher to the player, for videos that have the wrong aspect ratio.
// @author       MutationObserver
// @match        https://*.youtube.com/watch*v=*
// @match        https://*.youtube.com/embed/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

var currentRatio = null;
var aspectRatiosIndex = 0;
var videoElemAttr = "data-aspectRatio-userscript";
var buttonhtml = `<button id="aspectratioSwitcher" class="ytp-button" title="Aspect ratio">↔</button>`;
var csshtml = `
	<style>
	#aspectratioSwitcher {
		top: -13px;
		position: relative;
		text-align: center;
		font-size: 25px;
	}
	.ytp-big-mode #aspectratioSwitcher {
		font-size: 182%;
		top: -19px;
	}
	
	#movie_player[data-aspectRatio-userscript="16:9"] #aspectratioSwitcher,
	#movie_player[data-aspectRatio-userscript="9:16"] #aspectratioSwitcher,
	#movie_player[data-aspectRatio-userscript="4:3"] #aspectratioSwitcher {
		font-size: unset;
	}
	
	.html5-main-video { transition: .2s; }
	
	#movie_player[data-aspectRatio-userscript="16:9"] .html5-main-video { transform: scale(1.335,1)!important; }
	#movie_player[data-aspectRatio-userscript="4:3"] .html5-main-video { transform: scale(.75,1)!important; }
	#movie_player[data-aspectRatio-userscript="9:16"] .html5-main-video { transform: scale(1.77,1)!important; }
	</style>
`;
		
	
if (!document.querySelector(".ytp-subtitles-button.ytp-button")) var anchorElem = document.querySelector(".ytp-button.ytp-settings-button");
else var anchorElem = document.querySelector(".ytp-subtitles-button.ytp-button");

anchorElem.insertAdjacentHTML("beforebegin", buttonhtml + csshtml);

var buttonElem = document.querySelector("#aspectratioSwitcher");

buttonElem.addEventListener("click", aspectRatioSwitch);

function aspectRatioSwitch() {
	var videoElem = document.querySelector("#movie_player");
	
	aspectRatiosIndex++;
	if (aspectRatiosIndex > 3) aspectRatiosIndex = 0;
	
	switch(aspectRatiosIndex) {
	  case 1:
		currentRatio = "4:3";
		videoElem.setAttribute(videoElemAttr, currentRatio);
		buttonElem.innerHTML = currentRatio;
		return;
		break;
	  case 2:
		currentRatio = "16:9";
		videoElem.setAttribute(videoElemAttr, currentRatio);
		buttonElem.innerHTML = currentRatio;
		return;
		break;
	  case 3:
		currentRatio = "9:16";
		videoElem.setAttribute(videoElemAttr, currentRatio);
		buttonElem.innerHTML = currentRatio;
		return;
		break;
	  default:
		videoElem.setAttribute(videoElemAttr, "");
		currentRatio = null;
		buttonElem.innerHTML = "↔";
		return;
	}
}

})();