Add looping videos to articles

[RikRootsGuardian]

What does this change?

Displays looping self-hosted videos (ones with videoPlayerFormat = Loop) in the appropriate player.

Why?

Looping videos currently render correctly on fronts, but not in articles.

How to test

Deploy to CODE. Create an article in CODE Composer and include a self-hosted video atom. When you preview the article, the video should display in the appropriate player, according the "Video Player Format" setting from Media Atom Maker:

If set to "Standard", it should display in the normal player
If set to "Loop", it should display in the looping player

Screenshots

Before	After

Related PRs

• content-atom
• content-api (ES mappings)
• content-api (Porter)
• content-api-models
• content-api (Concierge)
• content-api-scala-client
• facia-scala-client
• frontend
• DCR <- you are here

[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 47104 of Mobile::mobile-apps-rendering to CODE

All deployment options

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

---

From guardian/actions-riff-raff.

[RikRootsGuardian]

(AI suggestions sent me down the wrong path)

[RikRootsGuardian]

This appears to be a CORS issue rather than a code issue. When developing locally we test on http://localhost:3030, which leads to CORS issues for loading the video from eg https://uploads.guim.co.uk/2025/10/07/Metaxas_tests_audience_with_first_jokes_of_Talk_show___video--a182c225-e45f-4d6a-82ed-05fa50e17fbb-2.0.mp4#t=0.001 ...:

The white space appears when the poster image fails to upload for some reason? This is an intermittent issue (because: see screen shot above which loaded the poster image fine 2 mins after failing and 2 mins before failing again):

I noticed this comment in the last PR to touch the LoopVideoPlayer file:

[RikRootsGuardian]

Can confirm that the video src/url strings are correct (pasting the url into the browser address bar loads the video)

[RikRootsGuardian]

Viewing the article locally, using http://r.thegulocal.com:3030/Article/https://www.theguardian.com/media/2025/oct/08/conservative-late-night-talkshow URL. doesn't solve the issue:

[RikRootsGuardian]

tl;dr: Looping videos now need to be served with a crossOrigin="anonymous" header (so subtitle files can be picked up) - failure will lead to the CORS issue. This is a fixed issue, except for this PR branch where we're testing on articles with self-hosted videos which are not looping videos, thus have not had the header added and old copies have not been purged from Fastly.

Chat messages: AnnaB, MarjanK

Anna:
Hey WebEx - we're running into a CORS issue and I wondered if you might have some advice.

We introduced (and rolled back) a crossOrigin="anonymous" header to looping videos so that we can retrieve the subtitle vtt file from uploads.guim. This change meant that both the video and the subtitle files are now requested as cross-origin CORS fetches, requiring fastly to include Access-Control-Allow-Origin headers.

Unsuprisingly, uploads.guim already has https://www.theguardian.com as an allowed origin but some users were getting the following error

Access to video at 'https://uploads.guim.co.uk/2025/11/05/Front_loop__Mamdani_victory_speech--4477e94a-a4a8-4a85-96c2-4ee8cff259f9-2.0.mp4#t=0.001' from origin 'https://www.theguardian.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Does anyone have any ideas as to why some users would be hitting this error?

I'm wondering if some users could be getting a cached mp4 response that does not have the headers attached because we did not ask for them before this change was rolled out and if we therefore need to purge the cache for some videos. Does that sound plausible? Are we able to purge certain items in the uploads.guim cache?

The fastly VCL is available here if anyone is interested in looking through it https://manage.fastly.com/configure/services/2TmfkSoyUoNo8aFNe6Htjs/versions/29/vcl/snippets/CORS%20headers

Marjan
Hi Anna, that is what I was thinking too, that we purge the cache for those videos. I think for uploads.guim.co.uk we'd need to do the purge manually in fastly by putting the whole url in Purge URL (for content & images we have this feature in the admin tool but I can't see anything there for uploads.guim)

[...etc]

[github-actions]

Deploy build 23011 of dotcom:rendering-all to CODE

All deployment options

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

---

From guardian/actions-riff-raff.

[simonbyford]

What is this magic string @RikRootsGuardian ?

[RikRootsGuardian]

This needs to be considered. It's used for tracking events eg when video first comes into view. This was developed with Fronts in mind, so I don't know if that tracking is useful for progression through the article? I put it in as a hardcoded text, but maybe a better approach would be to use the article URL here?

[github-actions]

Deploy build 241 of dotcom:ab-testing to CODE

All deployment options

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

---

From guardian/actions-riff-raff.

[RikRootsGuardian]

I would approve if I was permitted to - but only for the code updates made by @simonbyford

Merging remains blocked until someone approves my code changes

[simonbyford]

Looks good to me! 🚢

[gu-prout]

Seen on PROD (merged by @RikRootsGuardian 7 minutes and 58 seconds ago) Please check your changes!