openvibers/openvibe.live Commits
On a phone the live player keeps its 16:9 box from the first paint (channel CLS 0.166 to 0) (#329)
Changes
@@@ -684,6 +684,10 @@.ch-info-bar .ch-avatar { width: 32px; height: 32px; font-size: 0.85rem; }}@media (max-width: 768px) and (orientation: portrait) {++ /* The player keeps its 16:9 box from the first paint, and a landscape stream fills it. With no ratio the box was 0 px++ until the player's loader or first frame arrived, and everything below it jumped (real users: phone channel CLS++ p75 0.257, 2026-10-23). A portrait stream (.is-vertical, from the video's own size) still takes its own height. */++ .video-container:not(.is-vertical) { aspect-ratio: 16 / 9; }#video-element {object-fit: contain;max-height: 65vh;
@@ -684,6 +684,10 @@
@@ -684,6 +684,10 @@
.ch-info-bar .ch-avatar { width: 32px; height: 32px; font-size: 0.85rem; }
.ch-info-bar .ch-avatar { width: 32px; height: 32px; font-size: 0.85rem; }
}
}
@media (max-width: 768px) and (orientation: portrait) {
@media (max-width: 768px) and (orientation: portrait) {
+ /* The player keeps its 16:9 box from the first paint, and a landscape stream fills it. With no ratio the box was 0 px
+ until the player's loader or first frame arrived, and everything below it jumped (real users: phone channel CLS
+ p75 0.257, 2026-10-23). A portrait stream (.is-vertical, from the video's own size) still takes its own height. */
+ .video-container:not(.is-vertical) { aspect-ratio: 16 / 9; }
#video-element {
#video-element {
object-fit: contain;
object-fit: contain;
max-height: 65vh;
max-height: 65vh;