☰

YouTube Video Aspect Ratio Resizer

Resize YouTube player based on selected aspect ratio

// ==UserScript==
// @name         YouTube Video Aspect Ratio Resizer
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Resize YouTube player based on selected aspect ratio
// @author       Your Name
// @match        https://www.youtube.com/*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    // Function to set the player size based on the aspect ratio
    function setPlayerSize(aspectRatio) {
        const player = document.querySelector('.html5-video-player');
        if (player) {
            player.style.width = '100%';
            switch (aspectRatio) {
                case '21:9':
                    player.style.height = 'calc(100vw / (21/9))';
                    break;
                case '16:9':
                    player.style.height = 'calc(100vw / (16/9))';
                    break;
                case '4:3':
                    player.style.height = 'calc(100vw / (4/3))';
                    break;
                case '1:1':
                    player.style.height = '100vw';
                    break;
                case '9:16':
                    player.style.width = '100vh';
                    player.style.height = 'calc(100vh * (9/16))';
                    break;
                default:
                    break;
            }
        }
    }

    // Create a button to select aspect ratio
    function createAspectRatioButton(aspectRatio) {
        const button = document.createElement('button');
        button.innerText = aspectRatio;
        button.style.margin = '5px';
        button.style.padding = '10px';
        button.style.backgroundColor = '#ff0000';
        button.style.color = 'white';
        button.style.border = 'none';
        button.style.borderRadius = '5px';
        button.style.cursor = 'pointer';

        button.addEventListener('click', () => {
            setPlayerSize(aspectRatio);
        });

        return button;
    }

    // Create a controls container
    function createControls() {
        const controls = document.createElement('div');
        controls.style.position = 'absolute';
        controls.style.top = '10px';
        controls.style.right = '10px';
        controls.style.zIndex = '1000';
        controls.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
        controls.style.padding = '10px';
        controls.style.borderRadius = '5px';

        const aspectRatios = ['21:9', '16:9', '4:3', '1:1', '9:16'];
        aspectRatios.forEach(ratio => {
            controls.appendChild(createAspectRatioButton(ratio));
        });

        document.body.appendChild(controls);
    }

    // Create controls when the page is fully loaded
    window.addEventListener('load', () => {
        createControls();
    });
})();