Altera a disposição dos controles do vídeo

move-controls.js

// ==UserScript==
// @name         Move controles pra baixo do vídeo
// @namespace    http://tampermonkey.net/
// @version      2025-02-22
// @description  Altera a disposição dos controles do vídeo
// @author       Weslei Ramos
// @match        https://www.youtube.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    window.addEventListener('load', () => {
      const interval = setInterval(() => {
        const player = document.querySelector('#ytd-player');
        if (!player) {
          return;
        }

        const moviePlayer = player.querySelector('#movie_player');
        if (!moviePlayer) return console.error('Não encontramos o movie player');

        const controls = moviePlayer.querySelector('.ytp-chrome-bottom');
        if (!controls) return console.error('Não encontramos os controles');

        const information = document.querySelector('#below');
        if (!information) return console.error('Não encontramos as informações do vídeo');

        console.log('Aplicando estilos...')

        // Fazemos com que o player não esconda elementos que os "vazam"
        player.style.overflow = moviePlayer.style.overflow = 'unset';

        // Movemos os controles pra baixo
        controls.style.transform = 'translateY(60px)';

        // Movemos as informações do video um pouco mais pra baixo
        information.style.marginTop = '80px';

        console.log('Estilos aplicados!');

        clearInterval(interval);
      }, 1000);
    });
})();