ghassan/takeone-youtube-clone
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Video player: lock frame to strict 16:9 at all times

Browse Source 
Remove max-height clamps and override portrait/square/ultrawide/theater
variants so the .ytp-wrap box shape never distorts. Portrait content
letterboxes inside the 16:9 frame via object-fit: contain.

Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
This commit is contained in:
ghassanandClaude Opus 4.7 committed 2026-08-10 13:39:15 +03:00
1 parent b05ff14b3b
commit 5b6bd86d70
10 files changed
+412 -758
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

resources/views/components/video-player.blade.php
+21 -13
View File
@@ -220,23 +220,31 @@
background: #000;
border-radius: 12px;
overflow: hidden;
/* default aspect ratio; overridden per orientation */
/* Always 16:9 — no max-height so the shape is never distorted. */
aspect-ratio: 16/9;
max-height: 70vh;
/* Establish a size container so descendants can size themselves relative
to the player width (used by the coach-note overlay to scale). */
container-type: inline-size;
container-name: ytpwrap;
}
.ytp-wrap.portrait { aspect-ratio: 9/16; max-height: 80vh; width: auto; max-width: 100%; margin: 0 auto; }
.ytp-wrap.square { aspect-ratio: 1/1; max-height: 75vh; max-width: 75vh; margin: 0 auto; }
.ytp-wrap.ultrawide { aspect-ratio: 21/9; max-height: 65vh; }
/* Orientation classes intentionally forced to 16:9 too, so the frame
shape never changes with the underlying media orientation. The video
element itself uses object-fit: contain and will letterbox as needed. */
.ytp-wrap.portrait,
.ytp-wrap.square,
.ytp-wrap.ultrawide {
aspect-ratio: 16/9;
width: 100%;
max-width: none;
max-height: none;
margin: 0;
}
/* Theater mode */
/* Theater mode — keep 16:9 shape, just remove rounded corners. */
.ytp-wrap.theater {
max-height: 80vh;
aspect-ratio: unset;
height: 80vh;
aspect-ratio: 16/9;
height: auto;
max-height: none;
border-radius: 0;
}
@@ -604,10 +612,10 @@
/* ── Mobile ── */
@media (max-width: 768px) {
.ytp-wrap { border-radius: 0; max-height: 56vw; margin: 0; width: 100%; }
.ytp-wrap.portrait { max-height: 75vh; width: auto; max-width: 100%; }
.ytp-wrap.square { max-height: 85vw; max-width: 85vw; }
.ytp-wrap.ultrawide { max-height: 50vw; }
.ytp-wrap { border-radius: 0; margin: 0; width: 100%; aspect-ratio: 16/9; max-height: none; }
.ytp-wrap.portrait,
.ytp-wrap.square,
.ytp-wrap.ultrawide { aspect-ratio: 16/9; width: 100%; max-width: none; max-height: none; }
.video-view-page .ytp-wrap ~ * { padding-left: 16px; padding-right: 16px; }
}