Greasy Fork 镜像站

Display YouTube controller below the video

youtubeのコントローラーを動画下に表示する

Install this script ? Install as user style ?

Ask a question, post a review, or report the script.

Wrap lines

/* ==UserStyle==
@name           Display YouTube controller below the video
@namespace      github.com/openstyles/stylus
@version        1.0.1
@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:not(.ytp-full-bleed-player) > .ytp-chrome-bottom {
        margin-bottom: calc(var(--controller-height) * -1 - 15px) !important;
    }
    html:not([data-cast-api-enabled]) #movie_player:not(.ytp-full-bleed-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);
    }
 
    /* 再生終了後の動画を非表示 */
    #player-container:has(.ytp-fullscreen-grid[aria-label]:not([style*="display: none"])) #movie_player:not(.ytp-full-bleed-player) video {
        display: none !important;
    }
    /* シークバーのシーンプレビュー横幅をはみ出さない */
    .ytp-fine-scrubbing-container {
        overflow: hidden !important;
    }
    /* ツールチップサムネイルと字幕の表示を下げる */
    html:not([data-cast-api-enabled]) :is(#movie_player:not(.ytp-player-minimized):not(.ytp-full-bleed-player) > .ytp-tooltip,
    div:not(#inline-preview-player) > #ytp-caption-window-container) {
        margin-top: var(--controller-height) !important;
    }
}

扫码关注【爱吃馍】