Video atom as main media in articles - poster image fix

[KaliedaRik]

What does this change?

This fix forces articles that use video atoms generated in Media Atom Maker as their main media to use the 16:9 aspect ratio placeholder image over the video (before user interaction to play the video).

Why?

By default the importable YoutubeBlockComponent will use the article's trail image, if it is available, for its poster image. Since the redesign these trail images, which are also used for Fronts, are often created with a 5:4 aspect ratio. However MAM videos are still created in 16:9 aspect ratio; this means that when the override image is used for the video poster the top and bottom edges of the image will be auto-cropped (via CSS object-fit: cover) to display over the video before play commences.

To test

1. When running DCAR locally, we can test the following articles in the local test harness:

• https://www.theguardian.com/music/2025/jul/04/liam-hasnt-sounded-that-good-since-the-90s-fans-react-to-the-first-night-of-the-oasis-reunion-tour
• https://www.theguardian.com/world/2025/jul/25/thailand-cambodia-border-dispute-thai-evacuation-clashes-conflict

2. In CODE, test the example links.

3. Perform some additional smoke checking to make sure the fix only impacts MAM-generated Video Article pages. Normal (Composer-generated) articles that use video for their main media should not be impacted, nor should this change have any impact on looping video in the Fronts

4. Run the Chromatic tests

[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.

[github-actions]

Deploy build 44593 of Mobile::mobile-apps-rendering to CODE

All deployment options

• Deploy build 44593 of Mobile::mobile-apps-rendering to CODE
• Deploy parts of build 44593 to CODE by previewing it first
• What's on CODE right now?

---

From guardian/actions-riff-raff.

[github-actions]

Deploy build 20365 of dotcom:rendering-all to CODE

All deployment options

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

---

From guardian/actions-riff-raff.

[jonathonherbert]

Tested locally w/ video articles, this LGTM! Would we also want the same thing for main media in other article-like layouts, e.g. LiveLayout?

Stumbled across some interesting context in a comment on frontend on the rationale for using overrideImage in the first place:

Since moving to Atoms, the multimedia team have commented that they're reluctant to use videos
in main media as it makes the content look stale. This is because an Atom only has 1 image. Before Atoms, it was
possible to set a different image for a video on each use. This change is bringing that functionality back.
source: guardian/frontend#20637

[KaliedaRik]

After discussion, we've decided not to add any specific fix for Liveblogs that use video for their main media - mainly because of the difficulty of testing at a time when no liveblogs are using video for their main media. Will be happy to open a new issue/PR when the requirement is raised again.

[prout-bot]

Seen on PROD (merged by @KaliedaRik 9 minutes and 2 seconds ago) Please check your changes!