YouTube aspect ratio switcher

Adds an aspect ratio switcher to the player, for videos that have the wrong aspect ratio.
目前为 2018-07-26 提交的版本。查看最新版本。
Wrap lines
// ==UserScript==
// @name         YouTube aspect ratio switcher
// @namespace    https://gf.qytechs.cn/en/users/27283-mutationobserver
// @version      2018.07.26v2
// @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 buttonhtml = `<button id="aspectratioSwitcher" class="ytp-button" title="Aspect ratio">↔</button>`;
var csshtml = `
	<style>
	#aspectratioSwitcher {
		top: -13px;
		position: relative;
		text-align: center;
		font-size: 19px;
	}
	.ytp-big-mode #aspectratioSwitcher {
		font-size: 182%;
		top: -19px;
	}
	
	.aspectRatio16_9 #aspectratioSwitcher,
	.aspectRatio4_3 #aspectratioSwitcher {
		font-size: unset;
	}
	
	.html5-main-video { transition: .2s; }
	
	.aspectRatio16_9 .html5-main-video { transform: scale(1.335,1)!important; }
	.aspectRatio4_3 .html5-main-video { transform: scale(.75,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("#player");
	
	if (!currentRatio) {
		videoElem.classList.add("aspectRatio16_9");
		currentRatio = "16:9";
		buttonElem.innerHTML = currentRatio;
		return;
	}
	if (currentRatio == "16:9") {
		videoElem.classList.remove("aspectRatio16_9");
		videoElem.classList.add("aspectRatio4_3");
		currentRatio = "4:3";
		buttonElem.innerHTML = currentRatio;
		return;
	}
	if (currentRatio == "4:3") {
		videoElem.classList.remove("aspectRatio4_3");
		currentRatio = null;
		buttonElem.innerHTML = "↔";
		return;
	}
}

})();
欢迎访问Greasy Fork镜像
