☰

YouTube Video Aspect Ratio Resizer

Resize YouTube player based on selected aspect ratio

  1. // ==UserScript==
  2. // @name         YouTube Video Aspect Ratio Resizer
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Resize YouTube player based on selected aspect ratio
  6. // @author       Your Name
  7. // @match        https://www.youtube.com/*
  8. // @grant        GM_addStyle
  9. // ==/UserScript==
  10.  
  11. (function() {
  12.     'use strict';
  13.  
  14.     // Function to set the player size based on the aspect ratio
  15.     function setPlayerSize(aspectRatio) {
  16.         const player = document.querySelector('.html5-video-player');
  17.         if (player) {
  18.             player.style.width = '100%';
  19.             switch (aspectRatio) {
  20.                 case '21:9':
  21.                     player.style.height = 'calc(100vw / (21/9))';
  22.                     break;
  23.                 case '16:9':
  24.                     player.style.height = 'calc(100vw / (16/9))';
  25.                     break;
  26.                 case '4:3':
  27.                     player.style.height = 'calc(100vw / (4/3))';
  28.                     break;
  29.                 case '1:1':
  30.                     player.style.height = '100vw';
  31.                     break;
  32.                 case '9:16':
  33.                     player.style.width = '100vh';
  34.                     player.style.height = 'calc(100vh * (9/16))';
  35.                     break;
  36.                 default:
  37.                     break;
  38.             }
  39.         }
  40.     }
  41.  
  42.     // Create a button to select aspect ratio
  43.     function createAspectRatioButton(aspectRatio) {
  44.         const button = document.createElement('button');
  45.         button.innerText = aspectRatio;
  46.         button.style.margin = '5px';
  47.         button.style.padding = '10px';
  48.         button.style.backgroundColor = '#ff0000';
  49.         button.style.color = 'white';
  50.         button.style.border = 'none';
  51.         button.style.borderRadius = '5px';
  52.         button.style.cursor = 'pointer';
  53.  
  54.         button.addEventListener('click', () => {
  55.             setPlayerSize(aspectRatio);
  56.         });
  57.  
  58.         return button;
  59.     }
  60.  
  61.     // Create a controls container
  62.     function createControls() {
  63.         const controls = document.createElement('div');
  64.         controls.style.position = 'absolute';
  65.         controls.style.top = '10px';
  66.         controls.style.right = '10px';
  67.         controls.style.zIndex = '1000';
  68.         controls.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
  69.         controls.style.padding = '10px';
  70.         controls.style.borderRadius = '5px';
  71.  
  72.         const aspectRatios = ['21:9', '16:9', '4:3', '1:1', '9:16'];
  73.         aspectRatios.forEach(ratio => {
  74.             controls.appendChild(createAspectRatioButton(ratio));
  75.         });
  76.  
  77.         document.body.appendChild(controls);
  78.     }
  79.  
  80.     // Create controls when the page is fully loaded
  81.     window.addEventListener('load', () => {
  82.         createControls();
  83.     });
  84. })();