Full screen functionality for self hosted videos

[abeddow91]

What does this change?

Adds the functionality to full screen self hosted videos. This uses the fullscreen api.

This icon should not show for loop or cinemagraph style videos, only long-form video (currently called default)

The fullscreen icon renders in the same position as the mute button if the video does not have audio. If the video does have audio, the fullscreen icon appears next to the mute button. There has been a refactor to the CSS to place both button siblings within a wrapper.

Why?

This is a requirement for long form videos.

Screenshots

Screen.Recording.2026-02-25.at.16.18.58.mov

top control positioning	bottom control positioning

[github-actions]

Deploy build 25164 of dotcom:rendering-all to CODE

All deployment options

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

---

From guardian/actions-riff-raff.

[github-actions]

Deploy build 859 of dotcom:ab-testing to CODE

All deployment options

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

---

From guardian/actions-riff-raff.

[paperboyo]

Yay 👏 ! Some loose thoughts if I may (feel free to ignore):

• would we allow double-click to enter/exit fullscreen?* (to be consistent with our youtube player and… the rest of the internetz)
• here I’m conflicted, because I don’t know what solution I would propose. Habits form. Ideally, an icon should not change its place (fun). As I understand, the mute icon being optional, positions of both icons can change depending on the presence of the audio track… Not a huge issue: it’s unlikely anyone would be clicking these constantly to get annoyed by them changing positions. Nevertheless, it’s possible. Not sure of the solution, though… Simplest would be for the icons to have static positions and never move, but that would mean either a) it could look off with an empty space sometimes or b) mute would move between videos that have fullscreen and those that don’t. So, just wanted to mention in case someone smarter has an idea.

*I would even allow it (without icon) on loops and cinemagraphs (it’s there in the context menu anyway), but that’s less important

[domlander]

You may want to test the behaviour on mobile Safari, if you haven't already: https://caniuse.com/?search=exitFullscreen

[domlander]

Going vertical instead of horizontal may be required to avoid clashing with subtitles. Test page

[abeddow91]

You may want to test the behaviour on mobile Safari, if you haven't already: https://caniuse.com/?search=exitFullscreen

Thanks @domlander! You're quite right; fullscreen api is not available for mobile safari so i've added the webkit api for mobile safari users which fixes the issue

Simulator.Screen.Recording.-.iPhone.17.-.2026-02-26.at.15.38.38.mp4

[abeddow91]

Thanks for the feedback @paperboyo ! Some comments from my side...

• would we allow double-click to enter/exit fullscreen?* (to be consistent with our youtube player and… the rest of the internetz)

Yes we can do that! I've added the functionality in a different PR here #15453. I'd welcome your feedback on if the 250ms interaction delay is worth the pay off. For now, this is not available for cinemagraphs or loops.

• here I’m conflicted, because I don’t know what solution I would propose. Habits form. Ideally, an icon should not change its place (fun). As I understand, the mute icon being optional, positions of both icons can change depending on the presence of the audio track… Not a huge issue: it’s unlikely anyone would be clicking these constantly to get annoyed by them changing positions. Nevertheless, it’s possible. Not sure of the solution, though… Simplest would be for the icons to have static positions and never move, but that would mean either a) it could look off with an empty space sometimes or b) mute would move between videos that have fullscreen and those that don’t. So, just wanted to mention in case someone smarter has an idea.

A very good point - I agree. Perhaps my fault for not mentioning in the PR, but the placement of the icon is still TBD at the moment and is being looked at by Design. I have raised these concerns so hopefully they should be taken into account.

[domlander]

Going vertical instead of horizontal may be required to avoid clashing with subtitles. [

I think this is still an issue. The new code around Safari fullscreen looks good.