YouTube aspect ratio switcher

Adds an aspect ratio switcher to the player, for videos that have the wrong aspect ratio.
换行
// ==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;
	}
}

})();