動画を横に並べて表示するUserCSS

って実現可能なのだろうか？

https://www.youtube.com/shorts/9JEK50XwkS4https://www.youtube.com/watch?v=lmr7fOmm8A8

code:style.css

.iframe-video-player iframe {

max-width: 50%;

}

https://gyazo.com/70792f7ca5a6817c544859327798dbfe

使いどころはわからないwogikaze.icon

なんか数値計算をしてる時とかで、いろんな条件での実験結果を並べて表示して比較したいことがあるyosider.icon

実験結果が動画？CSVファイルじゃなくて？takker.icon

VTuberの配信の同時閲覧に使えそう（）Mijinko_SD.icon

おお！！助かります！yosider.icon*2

https://www.youtube.com/shorts/9JEK50XwkS4https://www.youtube.com/watch?v=lmr7fOmm8A8

code:style.css

.line .level-1 .iframe-video-player:not(.floating) iframe { width: calc(100%/2) }

.line .level-2 .iframe-video-player:not(.floating) iframe { width: calc(100%/3) }

.line .level-3 .iframe-video-player:not(.floating) iframe { width: calc(100%/4) }

.line .level-4 .iframe-video-player:not(.floating) iframe { width: calc(100%/5) }

メモ

画像の方は標準の動作が綺麗なので、動画を並べて表示する記法で良さそうnomadoor.icon

画像の場合は縦横比一定になるようにしている？

YouTube動画ではなく動画ファイルの場合も可能か？

video.videoにCSSを当てるといける

画像を並べて表示する記法のマトリクス記法のようにやろうとすると、YouTube動画の幅が1/3になってしまう…yosider.icon

code:css

.line:not(.cursor-line) .deco-\| { display: inline-flex }

.line .deco-\| .iframe-video-player iframe { object-fit: contain; margin: 0 }

https://gyazo.com/6d425f18556282204334533c01ba882f

[*| ]のほうの記法なら問題ない

code:style.css

/* マトリクス記法 */

.line:not(.cursor-line) .deco-\| { display: inline-flex }

.line .deco-\| :where(.iframe-video-player iframe, video.video) { object-fit: contain; margin: 0 }

/* 太字記法と組み合わせて列数を変える */

.line class^="level" .deco-\| { flex-wrap: wrap }

.line .level-1 .deco-\| > span { width: calc(100%/1) }

.line .level-2 .deco-\| > span { width: calc(100%/2) }

.line .level-3 .deco-\| > span { width: calc(100%/3) }

.line .level-4 .deco-\| > span { width: calc(100%/4) }

.line .level-5 .deco-\| > span { width: calc(100%/5) }

.line class^="level" .deco-\| :where(.iframe-video-player iframe, video.video) { object-fit: cover; width: 100%; height: 100% }

/* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */

.line .deco-\| > span, .line class^="level" .deco-\| > span { overflow: hidden }

.line .deco-\| :where(.iframe-video-player iframe, video.video) { margin: .2em }

/* 文字サイズは元のまま */

.line .deco-\|.deco-\* > span{ font-size: 15px; line-height: 15px; font-weight: normal;}