☰

YouTube Custom Style and Layout

Customize YouTube's video player, subscribe button, and layout

// ==UserScript==
// @name         YouTube Custom Style and Layout
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Customize YouTube's video player, subscribe button, and layout
// @author       You
// @match        *://www.youtube.com/*
// @grant        GM_addStyle
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';

    // Function to add custom styles
    function addCustomStyles() {
        GM_addStyle(`
            /* Make the video player smaller */
            ytd-player {
                width: 80% !important;
                height: auto !important;
                max-width: 720px !important;
            }

            /* Style the subscribe button */
            #subscribe-button {
                background-color: red !important;
                text-transform: uppercase !important;
                color: white !important;
                border-radius: 3px;
            }

            /* Move the subscribe button next to the like button */
            #top-level-buttons-computed {
                display: flex;
                justify-content: center;
                gap: 8px;
            }

            #top-level-buttons-computed #subscribe-button {
                order: 2;
            }

            /* Add a video list to the left */
            ytd-watch-flexy #related {
                position: absolute;
                top: 0;
                left: 0;
                width: 20%;
                max-width: 300px;
                z-index: 1;
                margin: 0;
                padding: 10px;
                box-shadow: 2px 0 5px rgba(0,0,0,0.3);
                background: #f9f9f9;
            }
            
            /* Adjust the main video area to make space for the video list */
            ytd-watch-flexy #primary {
                margin-left: 320px; /* Adjust this to fit the video list */
            }
        `);
    }

    // Wait for the DOM to be fully loaded
    window.addEventListener('load', addCustomStyles);
})();