1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

youtubeのカスタムcss

Last updated at Posted at 2022-12-27

youtubeのUIで、動画を表示したまま関連動画やコメントを見ることができないのが不便だったので書いたカスタムcssを、どこかに置いておかないとなにかの表示にリセットされたりしそうなのでここに記します。
ブラウザ拡張機能のStylusやUserCSSなどを使って適用することができます。
ついでにアップロードボタン、オフラインボタン、関連ゲーム項目を非表示にしているので、利用する場合は需要に応じて書き換えます。

/* 関連動画表示領域を固定 */
ytd-watch-next-secondary-results-renderer ytd-item-section-renderer {
    overflow-y: scroll;
    overflow-x: hidden;
    height: 90vh;
}

/* ウィンドウ幅が1616px以下の場合 */
@media screen and (max-width: 1016px) {
    /* 関連動画表示領域の領域を固定しスクロール可能に */
    ytd-watch-next-secondary-results-renderer ytd-item-section-renderer {
        overflow-y: scroll;
        overflow-x: hidden;
        height: 15vh;
    }

    /* 動画情報表示領域の幅を半分に */
    .ytd-watch-next-secondary-results-renderer ytd-compact-video-renderer {
        width: 50%;
    }
}


/* コメント表示スペースの領域を固定しスクロール可能に */
ytd-comments ytd-item-section-renderer{
    height: 26vh;
    overflow-y: scroll;
    overflow-x: hidden;
}


/* サムネイルの縦整列flex化 */
ytd-watch-next-secondary-results-renderer .ytd-item-section-renderer {
    display: flex;
    flex-flow: row wrap;
}

/* 詳細テキストのクリックイベント無効化 */
.details {
    pointer-events: none;
}

/* 音声検索の非表示 */
#voice-search-button {
    display: none;
}

/* オフラインボタンの非表示 */
ytd-download-button-renderer {
    display: none
}

/* ゲーム非表示 */
ytd-metadata-row-container-renderer {
    display: none;
}

/* アップロードボタンを非表示 */
yt-icon.ytd-topbar-menu-button-renderer {
    display: none;
}
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?