0. はじめに

YouTubeで現在の動画見ながら次の動画探してぇなぁ...

ニコニコ動画みたいなスクロールバーがあればいいのになぁ...

自分で作るかぁ...

ということで、YouTubeの関連動画にニコニコ動画のようなスクロールバーを導入してみました。

1. 導入方法

1.1. Stylusのインストール

ウェブページに独自のCSSを適用するための拡張機能「Stylus」をインストールします。

1.2. CSSの適用

YouTubeに移動し、StylusのアイコンをクリックしてCSSの編集画面を開きます。

その後、以下のCSSを貼り付け、左側にある「保存」ボタンを押します。

@-moz-document domain("youtube.com") {
    #items.style-scope.ytd-watch-next-secondary-results-renderer {
        overflow-x: hidden;
        overflow-y: scroll;
        width: 420px;  /* 関連動画の幅 */
        height: 65em;  /* スクロールバーの高さ */
        margin-bottom: 80px;
        overscroll-behavior: contain;
    }

    #content.style-scope.yt-related-chip-cloud-renderer {
        display: none;
    }

    #items.style-scope.ytd-watch-next-secondary-results-renderer::-webkit-scrollbar {
        width: 8px;
    }

    #items.style-scope.ytd-watch-next-secondary-results-renderer::-webkit-scrollbar-track {
        background-color: #dddddd;
        border-radius: 8px;
    }

    #items.style-scope.ytd-watch-next-secondary-results-renderer::-webkit-scrollbar-thumb {
        background-color: #828282;
        border-radius: 8px;
    }

    #items.style-scope.ytd-watch-next-secondary-results-renderer::-webkit-scrollbar-thumb:hover {
        background-color: #909090;
    }
}