動画を横に並べて表示するUserCSS
って実現可能なのだろうか？
style.css.iframe-video-player iframe {
max-width: 50%;
}
使いどころはわからない
なんか数値計算をしてる時とかで、いろんな条件での実験結果を並べて表示して比較したいことがある
実験結果が動画？CSVファイルじゃなくて？
VTuberの配信の同時閲覧に使えそう（）
おお！！助かります！
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) }
メモ
画像を並べて表示する記法っぽく書けると便利そう
動画と画像を並べて表示する記法を作れば解決かな？
画像の方は標準の動作が綺麗なので、動画を並べて表示する記法で良さそう
画像の場合は縦横比一定になるようにしている？
YouTube動画ではなく動画ファイルの場合も可能か？
video.video にCSSを当てるといける画像を並べて表示する記法のマトリクス記法のようにやろうとすると、YouTube動画の幅が1/3になってしまう…
css.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| .iframe-video-player iframe { object-fit: contain; margin: 0 }
[*| ] のほうの記法なら問題ない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;}