☰

YouTube Player Layout Modifier

Move the top of the progress bar to the bottom of the YouTube player and keep buttons at the top

  1. // ==UserScript==
  2. // @name         YouTube Player Layout Modifier
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  Move the top of the progress bar to the bottom of the YouTube player and keep buttons at the top
  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 rearrange player elements
  15.     function rearrangePlayerElements() {
  16.         const player = document.querySelector('.html5-video-player');
  17.         const progressBar = document.querySelector('.ytp-progress-bar-container');
  18.         const controls = document.querySelector('.ytp-chrome-bottom');
  19.  
  20.         if (player && progressBar && controls) {
  21.             // Move controls (buttons) to the top of the player
  22.             player.insertBefore(controls, player.firstChild);
  23.             // Move progress bar to the bottom of the player
  24.             player.appendChild(progressBar);
  25.         }
  26.     }
  27.  
  28.     // Mutation observer to rearrange elements when player is loaded or changed
  29.     const observer = new MutationObserver(rearrangePlayerElements);
  30.     
  31.     // Observe changes in the body, specifically to the video player
  32.     observer.observe(document.body, {
  33.         childList: true,
  34.         subtree: true
  35.     });
  36.  
  37.     // Call the function initially to rearrange elements if the player is already present
  38.     rearrangePlayerElements();
  39. })();