Youtube Controls Underneath Player + Hide Header by baconcatbug

/* ==UserStyle==
@name         Youtube Controls Underneath Player + Hide Header
@version      20241019.15.59
@namespace    https://userstyles.world/user/baconcatbug
@description  Moves the controls for the Youtube player under the video and hides the header. PLEASE READ THE NOTES FOR INSTRUCTIONS ON HOW TO KEEP THE TIME DISPLAY ACTIVE!
@homepage     https://userstyles.world/user/baconcatbug
@author       BaconCatBug
@license      WTFPL
==/UserStyle== */

@-moz-document url-prefix("https://www.youtube.com/watch?v=") {
/*
Unfortunately Youtube makes the controls not update the time/progress bar when it is "hidden". 
To allow for the controls to remain active, please use the "Tweaks For Youtube" extension by the developer "InzkDev" and set the controls to "Persistent Default" in the main extension menu. https://inzk<dot>dev/tweaks-for-youtube/
The extension is available for both Firefox and whatever version of Chromium you for some reason want to use.
*/

/* Hides the bottom gradient and the title in fullscreen mode. */
.ytp-gradient-bottom,
.ytp-chrome-top {
    display: none !important
}

/* Shifts the header up to hide it. */
#masthead-container {
    transform: translateY(-100%) !important;
}

/* Shifts the main body of the page to account for the header being shifted. */
#columns {
    transform: translateY(-11vh);
    transition: none;
    animation: none;
}

/* For those who don't enable autoplay, moves the paused video back behind the thumbnail. */
.video-stream.html5-main-video,
.html5-main-video {
    top: 0% !important;
}

/* Shifts the controls under the video and keeps them visible. */
/* See the notes for how to keep the controls updating. */
.ytp-chrome-bottom {
    transform: translateY(100%) !important;
    opacity: 1 !important;
}

/* Allows the controls to overflow and be visible when shifted. */
#ytd-player,
#container,
#movie_player {
    overflow: visible !important;
}

/* Moves the elements under the video (Title, etc) down to compensate for the controls being lowered. */
#below {
    transform: translateY(6vh) !important;
}

/* Sets the Z-Position of the thumbnail and the play icon over the video when not autoplaying, as well as the full screen video above other elements. */
.ytp-cued-thumbnail-overlay,
.ytp-cued-thumbnail-overlay-image,
#full-bleed-container * {
    z-index: 20 !important;
}
}