fix(skin): aspect ratio related fixes#1726
Merged
Merged
Conversation
✅ Deploy Preview for vjs10-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 8785c5d. Configure here.
Contributor
📦 Bundle Size Report🎨 @videojs/html — no changesPresets (7)
Media (10)
Players (5)
Skins (30)
UI Components (38)
Sizes are marginal over the root entry point. ⚛️ @videojs/react — no changesPresets (7)
Media (9)
Skins (27)
UI Components (32)
Sizes are marginal over the root entry point. 🧩 @videojs/core — no changesEntries (14)
🏷️ @videojs/element — no changesEntries (2)
📦 @videojs/store — no changesEntries (3)
🔧 @videojs/utils — no changesEntries (10)
📦 @videojs/spf — no changesEntries (4)
ℹ️ How to interpretJS sizes are initial static graph totals (minified + brotli). Lazy dynamic chunks are shown separately when present.
Run |
sampotts
force-pushed
the
fix/aspect-ratio
branch
from
8785c5d to
a64a67f
Compare
1 task
mihar-22
requested changes
Jun 23, 2026
mihar-22
left a comment
mihar-22
left a comment
Member
There was a problem hiding this comment.
This is a skins related change so I'm just temporarily blocking here due to compiler work.
mihar-22
approved these changes
Jun 29, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
min-width: 0andmin-height: 0onmedia-containerin the HTML skins so that slotted portrait videos can’t force the shadow container past the skin host’s authored aspect ratio.max-heighton the slider thumbnails so that portrait thumbs don't overflow. I could have gone fancy here and usedcqbunits but I think this simple fix is enough for now.Closes #1716
Note
Low Risk
CSS and layout-only changes with new visual tests; no playback, auth, or data-path changes.
Overview
Fixes layout when portrait video is slotted into a skin with an authored 16:9 (or other) aspect ratio.
media-containerin shared HTML skin CSS now usesmin-width: 0andmin-height: 0so slotted portrait media cannot expand the shadow container past the host’s aspect ratio.Slider storyboard thumbnails in default and minimal skins (CSS and Tailwind) gain
--media-slider-thumbnail-max-height: 8remon the preview image, replacing the old loading-only container cap so tall portrait thumbs stay bounded.Adds Playwright checks for authored aspect ratio and thumbnail height, plus sandbox source
hls-6(portrait Tailwind HLS) for manual testing.Reviewed by Cursor Bugbot for commit a64a67f. Bugbot is set up for automated code reviews on this repo. Configure here.