Support full-width looping videos in articles

[simonbyford]

What does this change?

Does two things:

1. sets the aspect ratio of the container for looping videos in articles by passing in containerAspectRatio. This follows on from Set aspect ratio of containers to prevent CLS #15029
2. adds support for full-width self-hosted videos. Looping videos in articles should display at full-width. Looping videos on fronts should continue to display in a fixed-size box with letterboxing (i.e. not full-width)

Why?

Editorial have requested it. There is a precedent because this is how images currently behave in articles.

Screenshots

Before	After

[github-actions]

Deploy build 23521 of dotcom:rendering-all to CODE

All deployment options

• Deploy build 23521 of dotcom:rendering-all to CODE
• Deploy parts of build 23521 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[github-actions]

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

[paperboyo]

🎁🎄 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!

[simonbyford]

🎁🎄 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

letterboxed is false in the default case, but true for fronts.

[RikRootsGuardian]

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?

[simonbyford]

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.

[simonbyford]

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]

Happy to approve, following discussion.

[github-actions]

Deploy build 364 of dotcom:ab-testing to CODE

All deployment options

• Deploy build 364 of dotcom:ab-testing to CODE
• Deploy parts of build 364 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.