YouTube Custom Style and Layout

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

Bu betiği kurabilmeniz için Tampermonkey, Greasemonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği yüklemek için Tampermonkey gibi bir uzantı yüklemeniz gerekir.

Bu betiği kurabilmeniz için Tampermonkey ya da Violentmonkey gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği kurabilmeniz için Tampermonkey ya da Userscripts gibi bir kullanıcı betiği eklentisini kurmanız gerekmektedir.

Bu betiği indirebilmeniz için ayrıca Tampermonkey gibi bir eklenti kurmanız gerekmektedir.

Bu betiği yüklemek için bir betik yöneticisi eklentisi yüklemeniz gerekecektir.

(Zaten bir betik yöneticim var, hadi yükleyelim!)

Bu stili yüklemek için Stylus gibi bir uzantı yüklemeniz gerekir.

Bu stili yüklemek için Stylus gibi bir uzantı kurmanız gerekir.

Bu stili yükleyebilmek için Stylus gibi bir uzantı yüklemeniz gerekir.

Bu stili yüklemek için bir kullanıcı stili yöneticisi uzantısı yüklemeniz gerekir.

Bu stili yüklemek için bir kullanıcı stili yöneticisi uzantısı kurmanız gerekir.

Bu stili yükleyebilmek için bir kullanıcı stili yöneticisi uzantısı yüklemeniz gerekir.

(Zateb bir user-style yöneticim var, yükleyeyim!)

// ==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);
})();