☰

Youtube Scrollable Right Side Description

Youtube description is moved on the right, expanded and scrollable

  1. // ==UserScript==
  2. // @name     Youtube Scrollable Right Side Description
  3. // @description Youtube description is moved on the right, expanded and scrollable
  4. // @version   3.1
  5. // @author    SH3LL
  6. // @license   MIT
  7. // @match     *://*.youtube.com/*
  8. // @grant     none
  9. // @run-at    document-end
  10. // @noframes
  11. // @namespace https://greasyfork.org/users/762057
  12. // ==/UserScript==
  13. (function() {
  14.     'use strict';
  15.  
  16.     const moveAndStyleElements = () => {
  17.         document.querySelector('#related')?.prepend(document.getElementById('bottom-row'));
  18.         document.querySelector('#related')?.prepend(document.getElementById('owner'));
  19.         document.getElementById('below')?.prepend(document.getElementById('info-container'));
  20.         document.getElementById('info-container')?.setAttribute("style", "color:white; font-size: 12px");
  21.         document.getElementById('owner')?.setAttribute("style", "margin:0");
  22.         document.getElementById('description-inline-expander').setAttribute("style", "margin-left: 0; overflow: auto; max-width: 100%; font-size: 1.3rem;line-height: normal; max-height: 600px; overflow: auto; width: auto; padding-top: 0; padding-bottom: 0; margin-right: 0 !important; background-color: var(--yt-playlist-background-item); padding: 8px; border-bottom-width: 0px;--yt-endpoint-text-decoration: underline;");
  23.         document.getElementById('description-inline-expander').setAttribute("is-expanded","");
  24.  
  25.         document.getElementById('description')?.setAttribute("style", "margin: 0;");
  26.         document.getElementById('description-inner')?.setAttribute("style", "margin: 0;");
  27.     };
  28.  
  29.     // OBSERVER FOR ELEMENTS TO MOVE
  30.     const moveObserver = new MutationObserver(mutations => {
  31.         if (document.getElementById('owner')) {
  32.             moveObserver.disconnect();
  33.             moveAndStyleElements();
  34.         }
  35.     });
  36.     moveObserver.observe(document.body, { childList: true, subtree: true });
  37.  
  38.     // OBSERVER FOR ELEMENTS TO REMOVE
  39.     const ui = new MutationObserver(mutations => {
  40.         const elementsToRemoveIds = ['ytd-watch-info-text', 'expand', 'collapse', 'snippet'];
  41.         elementsToRemoveIds.forEach(id => {
  42.             const element = document.getElementById(id);
  43.             if (element) {
  44.                 element.remove();
  45.             }
  46.         });
  47.  
  48.         let my_height = document.querySelector('.video-stream.html5-main-video');
  49.         document.getElementById('description-inline-expander').style.maxHeight = (parseInt(my_height.style.height) - 70) + "px";
  50.     });
  51.     ui.observe(document.body, { childList: true, subtree: true });
  52.  
  53. })();