Skip to content

Zoom YouTube by hihumi12

Homepage Write a review Install Get Stylus

Details

Authorhihumi12

LicenseCC0 1.0

Categoryyoutube

Created

Updated

Size2.9 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

YouTubeの画面とチャットを拡大します。
Enlarge the YouTube screen and chat.

Notes

使うとどうなる？

動画プレイヤーとチャット両方を最大まで拡大します

　　・ 少し遠くから見る時など、チャットも含めて全体を拡大して見たい時に使ってください
　　・ 上部メニューが隠れますが、マウスホバーすると表示されます

チャット欄を細かくカスタマイズしたい場合は別途公開しているuserstyleの「Kaiteki YouTube Chat」をご利用ください

切り替えが可能な機能

・チャットのフォントサイズ
・チャット欄の幅

確認されている不具合

修正したいけど上手くいっていない項目
　　・シークバー部分がズレて表示される

更新履歴

1.0.0 - 2022/01/16

公開

1.1.0 - 2022/01/19

・チャット欄のフォントサイズを変更可能にしました
・画面上部にマウスホバーで上部メニューが表示されるように変更しました

1.2.0 - 2023/01/01

・小さい画面サイズで発生する左右の余白を削除
・チャット欄を任意の幅に変更できる機能を追加

1.2.1 - 2023/03/19

・画面下部に横スクロールバーが表示される問題を修正

1.2.2 - 2023/12/23

・画面左端の一部が一部表示されない問題を修正

Source code

/* ==UserStyle==
@name           Zoom YouTube
@namespace      stylus/hihumi12/zoom-youtube
@version        1.2.2
@description    YouTubeの画面とチャットを拡大します　Enlarge the YouTube screen and chat.
@author         hihumi12 (https://twitter.com/hihumin12)
@license        CC0 1.0
@preprocessor   stylus

@var number   chat_width  "チャット欄の幅（px）" [500, 0, 1000, 10, "px"]
@var number   font_size  "チャットのフォントサイズ" [23, 10, 30, 1, "px"]
==/UserStyle== */

@-moz-document url-prefix("https://www.youtube.com/watch?") {
    /* --------------------------------------------------------------- */
    /* 動画プレイヤー＆チャット欄 */
    
    /* 上部メニュー */
    #content {
        /* 上部メニューを非表示 */
        & > #masthead-container {
            overflow: hidden;
            height: 5px;
            &:hover {
                height: auto;
            }
        }
        & > #page-manager.ytd-app {
            margin-top: 5px;
        }
    }
    
    /* 全画面表示にした時にレイアウトが崩れる問題への対応 */
    .ytp-fullscreen > div > video.video-stream.html5-main-video {
        height: 100vh!important;
    }
    
    
    /* 動画プレイヤー＆チャット欄 */
    #columns {
        /* 横幅を広く使うことでチャット欄を広くする */
        margin: 0 2px !important;
        max-width: 100% !important;
        

        /* 動画プレイヤーを画面いっぱいまで表示する */
        & > #primary {
            max-width: none !important;
            margin: 0 !important;
            padding: 0 !important;
            #player-container-outer {
                min-width: 100%;
                #player-container > #ytd-player > #container > .html5-video-player > .html5-video-container > video.video-stream.html5-main-video {
                    width: 100% !important;
                    max-width: 100% !important;
                    height: auto !important;
                }
            }

        }
        /* チャット欄 */
        & > #secondary {
            width: chat_width;
            padding-right: 2px;
            /* チャット欄を画面一番下まで伸ばす */
            ytd-live-chat-frame#chat {
                height: calc(100vh - 5px) !important;
                min-height: calc(100vh - 5px) !important;
            }
        }
    }
}

@-moz-document url-prefix("https://www.youtube.com/live_chat") {
    /* --------------------------------------------------------------- */
    /* チャット欄　共通 */
    
    /* チャットメッセージを拡大 */
    #message {
        font-size: font_size;
        padding: 2px 0;
        line-height: 1em !important;
    }
}

Reviews

No reviews yet.