☰

YouTube aspect ratio switcher

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

当前为 2023-02-01 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         YouTube aspect ratio switcher
  3. // @namespace    https://greasyfork.org/en/users/27283-mutationobserver
  4. // @version      2023.02.01v5
  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 aspectRatiosIndex = 0;
  17. var videoElemAttr = "data-aspectRatio-userscript";
  18. var buttonhtml = `<button id="aspectratioSwitcher" class="ytp-button" title="Aspect ratio">↔</button>`;
  19. var csshtml = `
  20. 	<style>
  21. 	#aspectratioSwitcher {
  22. 		top: -13px;
  23. 		position: relative;
  24. 		text-align: center;
  25. 		font-size: 25px;
  26. 	}
  27. 	.ytp-big-mode #aspectratioSwitcher {
  28. 		font-size: 182%;
  29. 		top: -19px;
  30. 	}
  31. 	
  32. 	#movie_player[data-aspectRatio-userscript="16:9"] #aspectratioSwitcher,
  33. 	#movie_player[data-aspectRatio-userscript="9:16"] #aspectratioSwitcher,
  34. 	#movie_player[data-aspectRatio-userscript="4:3"] #aspectratioSwitcher {
  35. 		font-size: unset;
  36. 	}
  37. 	
  38. 	.html5-main-video { transition: .2s; }
  39. 	
  40. 	#movie_player[data-aspectRatio-userscript="16:9"] .html5-main-video { transform: scale(1.335,1)!important; }
  41. 	#movie_player[data-aspectRatio-userscript="4:3"] .html5-main-video { transform: scale(.75,1)!important; }
  42. 	#movie_player[data-aspectRatio-userscript="9:16"] .html5-main-video { transform: scale(1.77,1)!important; }
  43. 	</style>
  44. `;
  45. 		
  46. 	
  47. if (!document.querySelector(".ytp-subtitles-button.ytp-button")) var anchorElem = document.querySelector(".ytp-button.ytp-settings-button");
  48. else var anchorElem = document.querySelector(".ytp-subtitles-button.ytp-button");
  49.  
  50. anchorElem.insertAdjacentHTML("beforebegin", buttonhtml + csshtml);
  51.  
  52. var buttonElem = document.querySelector("#aspectratioSwitcher");
  53.  
  54. buttonElem.addEventListener("click", aspectRatioSwitch);
  55.  
  56. function aspectRatioSwitch() {
  57. 	var videoElem = document.querySelector("#movie_player");
  58. 	
  59. 	aspectRatiosIndex++;
  60. 	if (aspectRatiosIndex > 3) aspectRatiosIndex = 0;
  61. 	
  62. 	switch(aspectRatiosIndex) {
  63. 	  case 1:
  64. 		currentRatio = "4:3";
  65. 		videoElem.setAttribute(videoElemAttr, currentRatio);
  66. 		buttonElem.innerHTML = currentRatio;
  67. 		return;
  68. 		break;
  69. 	  case 2:
  70. 		currentRatio = "16:9";
  71. 		videoElem.setAttribute(videoElemAttr, currentRatio);
  72. 		buttonElem.innerHTML = currentRatio;
  73. 		return;
  74. 		break;
  75. 	  case 3:
  76. 		currentRatio = "9:16";
  77. 		videoElem.setAttribute(videoElemAttr, currentRatio);
  78. 		buttonElem.innerHTML = currentRatio;
  79. 		return;
  80. 		break;
  81. 	  default:
  82. 		videoElem.setAttribute(videoElemAttr, "");
  83. 		currentRatio = null;
  84. 		buttonElem.innerHTML = "↔";
  85. 		return;
  86. 	}
  87. }
  88.  
  89. })();