Display YouTube controller below the video

youtubeのコントローラーを動画下に表示する
当前为 2025-11-29 提交的版本，查看最新版本。
换行
/* ==UserStyle==
@name           Display YouTube controller below the video
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    youtubeのコントローラーを動画下に表示する
@license        MIT
@author         Me
==/UserStyle== */
@-moz-document domain("youtube.com") {
    /* 動画コントローラーを動画下に表示する */
    :root {
        --controller-height: 61px;
        --controller-bgcolor: #000;
    }
    ytd-watch-flexy[theater] #full-bleed-container,
    ytd-watch-flexy:not([theater]) #player-container-outer {
        margin-bottom: calc(var(--controller-height) + 10px) !important;
    }
    #movie_player,
    #error-screen {
        z-index: 1;
    }
    #ytd-player,
    .html5-video-player {
        overflow: visible !important;
    }
    html:not([data-cast-api-enabled]) ytd-watch-flexy[theater] #movie_player > .ytp-chrome-bottom {
        margin-bottom: calc(var(--controller-height) * -1 - 15px) !important;
    }
    html:not([data-cast-api-enabled]) #movie_player > .ytp-chrome-bottom {
        margin-bottom: calc(var(--controller-height) * -1) !important;
    }
    ytd-watch-flexy[theater] #player-container:not(.ytd-video-preview)::after {
        height: calc(var(--controller-height) + 15px);
    }
    #player-container:not(.ytd-video-preview)::after {
        content: '';
        position: absolute;
        width: 100%;
        height: var(--controller-height);
        background: var(--controller-bgcolor);
    }

    /* 再生終了後の動画を非表示 */
    #movie_player:has(.ytp-fullscreen-grid:not([style*="display: none"])) video {
        display: none !important;
    }
    /* シークバーのシーンプレビュー横幅をはみ出さない */
    .ytp-fine-scrubbing-container {
        overflow: hidden !important;
    }
    /* ツールチップサムネイルと字幕の表示を下げる */
    html:not([data-cast-api-enabled]) :is(#movie_player:not(.ytp-player-minimized) > .ytp-tooltip, div:not(#inline-preview-player) > #ytp-caption-window-container) {
        margin-top: var(--controller-height) !important;
    }
}