☰

YouTube aspect ratio switcher

Adds an aspect ratio switcher to the player, for videos that have the wrong aspect ratio.

目前為 2019-06-21 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name         YouTube aspect ratio switcher
  3. // @namespace    https://greasyfork.org/en/users/27283-mutationobserver
  4. // @version      2019.01.07v3
  5. // @description  Adds an aspect ratio switcher to the player, for videos that have the wrong aspect ratio.
  6. // @author       MutationObserver
  7. // @match        https://*.youtube.com/watch*v=*
  8. // @match        https://*.youtube.com/embed/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15. var currentRatio = null;
  16. var buttonhtml = `<button id="aspectratioSwitcher" class="ytp-button" title="Aspect ratio">↔</button>`;
  17. var csshtml = `
  18. 	<style>
  19. 	#aspectratioSwitcher {
  20. 		top: -13px;
  21. 		position: relative;
  22. 		text-align: center;
  23. 		font-size: 19px;
  24. 	}
  25. 	.ytp-big-mode #aspectratioSwitcher {
  26. 		font-size: 182%;
  27. 		top: -19px;
  28. 	}
  29. 	
  30. 	.aspectRatio16_9 #aspectratioSwitcher,
  31. 	.aspectRatio4_3 #aspectratioSwitcher {
  32. 		font-size: unset;
  33. 	}
  34. 	
  35. 	.html5-main-video { transition: .2s; }
  36. 	
  37. 	.aspectRatio16_9 .html5-main-video { transform: scale(1.335,1)!important; }
  38. 	.aspectRatio4_3 .html5-main-video { transform: scale(.75,1)!important; }
  39. 	</style>
  40. `;
  41. 		
  42. 	
  43. if (!document.querySelector(".ytp-subtitles-button.ytp-button")) var anchorElem = document.querySelector(".ytp-button.ytp-settings-button");
  44. else var anchorElem = document.querySelector(".ytp-subtitles-button.ytp-button");
  45.  
  46. anchorElem.insertAdjacentHTML("beforebegin", buttonhtml + csshtml);
  47.  
  48. var buttonElem = document.querySelector("#aspectratioSwitcher");
  49.  
  50. buttonElem.addEventListener("click", aspectRatioSwitch);
  51.  
  52. function aspectRatioSwitch() {
  53. 	var videoElem = document.querySelector("#movie_player");
  54. 	
  55. 	if (!currentRatio) {
  56. 		videoElem.classList.add("aspectRatio16_9");
  57. 		currentRatio = "16:9";
  58. 		buttonElem.innerHTML = currentRatio;
  59. 		return;
  60. 	}
  61. 	if (currentRatio == "16:9") {
  62. 		videoElem.classList.remove("aspectRatio16_9");
  63. 		videoElem.classList.add("aspectRatio4_3");
  64. 		currentRatio = "4:3";
  65. 		buttonElem.innerHTML = currentRatio;
  66. 		return;
  67. 	}
  68. 	if (currentRatio == "4:3") {
  69. 		videoElem.classList.remove("aspectRatio4_3");
  70. 		currentRatio = null;
  71. 		buttonElem.innerHTML = "↔";
  72. 		return;
  73. 	}
  74. }
  75.  
  76. })();