Display YouTube Shorts separated into video and controls.
YouTubeショート動画を 動画とコントロールに分割して表示します
YouTube Twin Shorts by personwritep
Details
Authorpersonwritep
LicenseNO-REDISTRIBUTION
Categorywww.youtube.com
Created
Updated
Size3.5 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
YouTubeショート動画は、スマートフォンのディスプレイをデフォルトにしていて、コントロール表示が動画を見難くする場合があります。 PCで閲覧する場合はディスプレイ幅に余裕があるので、動画とコントロールを左右に分割して表示する「YouTube Twin Shorts」を制作しました。
オプション
◎ 動画・コントロールの各画面の角を丸める・丸めないの選択ができます。
◎ 字幕をコントロール画面・動画画面のどちらに表示するかを選択できます。
◎ サムネイル画像をコントロール画面に表示する・しないを選択できます。
このスタイルの詳細は以下のページを参照ください。
https://ameblo.jp/personwritep/entry-12881051915.html
2025.01.04
「字幕」の表示位置（パネル下部）の選択オプションを追加。「パネル」の角を丸めるオプションを一元化。
2025.01.03 初稿のアップロード
Source code
/* ==UserStyle==
@name YouTube Twin Shorts
@namespace userstyles.world
@author personwritep
@description YouTubeショート動画を動画とコントロールに分割表示する
@version 202501.04.01
@license NO-REDISTRIBUTION
@preprocessor stylus
@var checkbox round_mov "動画画面の角を丸める" 0
@var checkbox mov_caption "字幕を動画パネルの側に表示する" 0
@var checkbox mov_caption_bottom " パネルの下部に表示する" 1
@var checkbox img_con "コントローラーにサムネイル画像を表示しない" 0
==/UserStyle== */
@-moz-document url-prefix("https://www.youtube.com/shorts/") {
/* コンテナー */
#player-container.player-container {
overflow: visible; }
if round_mov {
#player-container.player-container {
border-radius: 12px; }
#container.ytd-player,
#shorts-player.html5-video-player {
background: transparent; }
.metadata-container.ytd-reel-player-overlay-renderer {
border-radius: 0 0 12px 12px; } }
if !round_mov {
#player-container.player-container {
border-radius: 0; }
#container.ytd-player,
#shorts-player.html5-video-player {
background: transparent; }
.metadata-container.ytd-reel-player-overlay-renderer {
border-radius: 0; } }
if img_con {
#player-container.player-container {
background-image: none !important; } }
ytd-shorts #shorts-container.ytd-shorts {
padding-left: var(--ytd-shorts-player-width); }
#shorts-player video.video-stream.html5-main-video {
z-index: 2;
left: calc( -20px - var(--ytd-shorts-player-width)) !important; }
@media (max-height: 660px) {
ytd-shorts #shorts-container.ytd-shorts {
padding-left: 315px; }
#shorts-player video.video-stream.html5-main-video {
left: -335px !important; } }
if round_mov {
#shorts-player video.video-stream.html5-main-video {
border-radius: 12px; } }
/* 上下ナビボタン */
ytd-shorts[enable-anchored-panel] .navigation-container.ytd-shorts {
top: 0;
height: 120px;
background: transparent !important; }
.yt-spec-button-shape-next--size-xl.yt-spec-button-shape-next--icon-button {
height: 48px;
width: 48px; }
/* 動画の説明表示時に動画配置を変更しない */
#anchored-panel {
background: #fff;
z-index: 2; }
ytd-reel-video-renderer[enable-anchored-panel][is-persistent-panel-active]:not([enable-player-metadata-container]) {
right: 0; }
/* 説明表示のモーダル表示時の背景 */
ytd-shorts[anchored-panel-active][small-screen-persistent-panel] #anchored-panel-scrim.ytd-shorts {
background-color: transparent; }
/* 日本語字幕の左右位置補正 */
.ytp-caption-window-container {
display: flex;
flex-direction: column;
align-items: center; }
.caption-window {
margin-left: 0 !important;
left: unset !important; }
/* 字幕を右ウインドウに表示する */
#shorts-player.html5-video-player {
overflow: visible; }
if mov_caption {
.ytp-caption-window-container {
right:calc( 20px + var(--ytd-shorts-player-width)); }
@media (max-height: 660px) {
.ytp-caption-window-container {
right: 335px; } }
ytd-reel-video-renderer .short-video-container .caption-window.ytp-caption-window-top {
margin-top: 4%; }
if mov_caption_bottom {
ytd-reel-video-renderer .short-video-container .caption-window.ytp-caption-window-top {
top: unset !important;
bottom: 4%; } } } }