Render self-hosted videos correctly when there is cropping or letterboxing

[domlander]

What does this change?

Limit the aspect ratio a Front Card self-hosted video can be. If a video is "taller" than 5:4, crop the top and bottom to only render the middle part of the video.

On Fronts cards on desktop, use grey bars at the top/bottom of the video container if the video is "wider" than 5:4. On mobile, the container should hug the video and no grey bars will be seen.

There was code within the SelfHostedVideo island that was specific to the fronts card or the feature card that had to be worked around by the other, or other calling components. To remedy this, and to make the island easier to use for calling components, the following changes to props have been made:

• containerAspectRatioDesktop and containerAspectRatioMobile replaces containerAspectRatio. This change allows a container to be set on mobile and is more explicit to the caller with regard to breakpoints when the video container will be locked to a specific aspect ratio.
• letterboxed is replaced by minAspectRatio and maxAspectRatio. Letterboxed infers that the video will have grey bars to its side, but this is not always true. It depends on the aspect ratio of the video and the aspect ratio of the container. Creating these two props allows the calling component to specify its configuration and remove Fronts Card specific config from the island.
• isFeatureCard is removed. A component should not know as little as possible about its caller. Feature Card specific properties can now be determined through the new set of props alone.

Why?

Vertical videos do not look good when allowed to render in 9:16 on Front cards. The videos are designed to look good when they are cropped to 5:4.

Maximum height limits are unnecessary now that the tallest video aspect ratio we support on front cards is 5:4. These height limits were not applicable for Feature Cards or videos in Articles. It is unlikely that there are many instances where a video will render full-width on a square-ish viewport: on tablets the videos won't render full-width; on mobiles the viewport is unlikely to be less "tall" than 5:4.

5:3 videos were breaking out of the viewport. We now support these wide aspect ratios.

Screenshots

• Wide video desktop: For fronts cards videos wider than the container, we still want to show the whole video without cropping. Instead, show grey bars above and below.
• Tall video desktop/mobile: On fronts cards, the tallest a video can be is 4:5. Videos taller than this should be cropped equally at the top and bottom.
• Feature card wide. Always fill the entirety of the feature card. We don't want grey bars here. Crop the video so that it fits a 4:5 container.

	Before	After
Wide video desktop
Tall video desktop
Tall video mobile
Feature card wide

[github-actions]

Deploy build 509 of dotcom:ab-testing to CODE

All deployment options

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

---

From guardian/actions-riff-raff.

[github-actions]

Deploy build 24039 of dotcom:rendering-all to CODE

All deployment options

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

---

From guardian/actions-riff-raff.

[gu-prout]

Seen on PROD (merged by @domlander 12 minutes and 56 seconds ago) Please check your changes!