Support full-width looping videos in articles #15056
Conversation
simonbyford
force-pushed
the
fix-aspect-ratio
branch
from
30ac5ce to
2db2cd5
Compare
simonbyford
changed the title
|
Hello 👋! When you're ready to run Chromatic, please apply the You will need to reapply the label each time you want to run Chromatic. |
github-actions
bot
removed
the
run_chromatic
|
🎁🎄 Yay! Just a useless naming thought: even though fronts were where the player was born, they are a special case (letter-boxed?), while the behaviour in articles after your PR is what’s normal and expected. Once we finally have different weightings (roles) there, it may not exactly be “full-width” either. If it’s easier as is, I haven’t wrote this comment. Merry Xmas! |
Thanks @paperboyo! I like your suggestion and I've made the change here: 0f2b3b0
|
| } | ||
| subtitleSize={subtitleSize} | ||
| enableHls={enableHls} | ||
| letterboxed={true} |
There was a problem hiding this comment.
I don't know why we're touching the Fronts card here? Is calculating the aspect ratio from the video itself not enough?
Another thought - what happened with the rumours that people were looking to add an aspect ratio attribute to media atoms?
There was a problem hiding this comment.
Fair question, I've bundled together 2 distinct changes in this PR which is causing confusion. It probably should have been 2 PRs.
The first change uses the aspect ratio of the video to calculate the size of the video container for the purposes of reducing CLS. It has no impact on whether or not the video displays letterboxes. It just follows on from this PR where it was missed: #15029
The second change introduces the concept of letterboxes which can be enabled or disabled. Since the default state is to disable letterboxes (see Mat's comment), we need to change the Fronts card to enable them again.
There was a problem hiding this comment.
Another thought - what happened with the rumours that people were looking to add an aspect ratio attribute to media atoms?
If I understand you correctly, such a field exists now. But it's a string (e.g. "5:4") and we need a numerical value so I opted to use the dimensions instead.
RikRootsGuardian
left a comment
RikRootsGuardian
left a comment
There was a problem hiding this comment.
Happy to approve, following discussion.
simonbyford
force-pushed
the
fix-aspect-ratio
branch
from
0f2b3b0 to
dd67624
Compare
|
Seen on PROD (merged by @simonbyford 8 minutes and 42 seconds ago) Please check your changes! |
| subtitleSource?: string; | ||
| subtitleSize: SubtitleSize; | ||
| enableHls: boolean; | ||
| letterboxed?: boolean; |
There was a problem hiding this comment.
What does letterboxed mean? Is it where the video can appear with grey bars at its left and right?
There was a problem hiding this comment.
That's right. I appreciate it isn't a standard or obvious term though and I'm open to changing it if you have any ideas? I originally went with fullWidth (to mean the opposite of letterboxed) but after some feedback I changed it.
There was a problem hiding this comment.
My fault for choosing the term itself (and, in our case, more correct would be, even more obscure, pillarbox). But while I don’t care for the term much, I think the reasoning behind my earlier comment still stands? (whatever works, ofc, though!)
There was a problem hiding this comment.
The reasoning is solid. The name is obscure but perhaps just a comment explaining it would clear things up?
| max-height: 100vh; | ||
| max-height: 100svh; | ||
| max-width: 100%; |
There was a problem hiding this comment.
Why are these three lines of CSS not useful for video on articles?
There was a problem hiding this comment.
The requirement was that looping videos should take up the full width of an article, regardless of their aspect ratio. If you introduce a max-height then some very tall videos cannot take up the full width. For example:
Source: https://viewer.code.dev-gutools.co.uk/preview/music/2025/dec/17/simon-looping-video-test
In reality this is an edge case and will probably never happen but that's what motivated me to make this change.
max-width: 100% should be fine though and can be moved out of the conditional.
What does this change?
Does two things:
containerAspectRatio. This follows on from Set aspect ratio of containers to prevent CLS #15029Why?
Editorial have requested it. There is a precedent because this is how images currently behave in articles.
Screenshots