☰

YouTube aspect ratio switcher

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

目前为 2018-07-25 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         YouTube aspect ratio switcher
  3. // @namespace    https://greasyfork.org/en/users/27283-mutationobserver
  4. // @version      2018.07.25v1
  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. 	
  26. 	.aspectRatio16_9 #aspectratioSwitcher,
  27. 	.aspectRatio4_3 #aspectratioSwitcher {
  28. 		font-size: unset;
  29. 	}
  30. 	
  31. 	.html5-main-video { transition: .2s; }
  32. 	
  33. 	.aspectRatio16_9 .html5-main-video { transform: scale(1.335,1)!important; }
  34. 	.aspectRatio4_3 .html5-main-video { transform: scale(.75,1)!important; }
  35. 	</style>
  36. `;
  37. 		
  38. 	
  39. if (!document.querySelector(".ytp-subtitles-button.ytp-button")) var anchorElem = document.querySelector(".ytp-button.ytp-settings-button");
  40. else var anchorElem = document.querySelector(".ytp-subtitles-button.ytp-button");
  41.  
  42. anchorElem.insertAdjacentHTML("beforebegin", buttonhtml + csshtml);
  43.  
  44. var buttonElem = document.querySelector("#aspectratioSwitcher");
  45.  
  46. buttonElem.addEventListener("click", aspectRatioSwitch);
  47.  
  48. function aspectRatioSwitch() {
  49. 	var videoElem = document.querySelector("#player");
  50. 	
  51. 	if (!currentRatio) {
  52. 		videoElem.classList.add("aspectRatio16_9");
  53. 		currentRatio = "16:9";
  54. 		buttonElem.innerHTML = currentRatio;
  55. 		return;
  56. 	}
  57. 	if (currentRatio == "16:9") {
  58. 		videoElem.classList.remove("aspectRatio16_9");
  59. 		videoElem.classList.add("aspectRatio4_3");
  60. 		currentRatio = "4:3";
  61. 		buttonElem.innerHTML = currentRatio;
  62. 		return;
  63. 	}
  64. 	if (currentRatio == "4:3") {
  65. 		videoElem.classList.remove("aspectRatio4_3");
  66. 		currentRatio = null;
  67. 		buttonElem.innerHTML = "↔";
  68. 		return;
  69. 	}
  70. }
  71.  
  72. })();