Skip to content

Support default video style#15671

Merged
domlander merged 4 commits intomainfrom
doml/sh-default
Apr 14, 2026
Merged

Support default video style#15671
domlander merged 4 commits intomainfrom
doml/sh-default

Conversation

@domlander
Copy link
Copy Markdown
Contributor

@domlander domlander commented Apr 9, 2026

What does this change?

Adds support for the "Default" video style of self-hosted. This style is known as "non-youtube" in the tools.

Default video:

  • Does not loop
  • Does not autoplay. This is subject to change.
  • Does not preload data. Setting preload=metadata can be costly as a portion of the video is downloaded alongside the metadata. There is no way to only download the video metadata using the preload attribute. If we find that default videos are usually played or the wait between clicking play and the video playing is too long, then we will revisit this. This is also tied to autoplay: if we autoplay, we will preload data.

ShowControls is split out: we may want to display the play icon even if the video is not currently playable (we haven't preloaded data).

Removes videoStyle logic from the player component. Let's keep the logic within the island component as much as we can, so that the player can be "dumb".

Updates feature card self-hosted video stories to use the videos in fixtures.

Note: Designs will be updated in a future PR.

Why?

So that we can start using longer videos. We don't necessarily want to loop or autoplay longer videos.

Screenshots

Immersive feature card

shows no autoplay and icons appear on playback

Screen.Recording.2026-04-09.at.12.15.24.mov

Card

Also demonstrates shows button functionality and no loop

Screen.Recording.2026-04-09.at.12.18.31.mov

@domlander domlander self-assigned this Apr 9, 2026
@domlander domlander added run_chromatic Runs chromatic when label is applied fronts + curation maintenance Departmental tracking: maintenance work, not a fix or a feature labels Apr 9, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Apr 9, 2026
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 9, 2026

@domlander domlander force-pushed the doml/sh-default branch 2 times, most recently from ebc9288 to 9205bd4 Compare April 9, 2026 11:02
@domlander domlander added the run_chromatic Runs chromatic when label is applied label Apr 9, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Apr 9, 2026
@domlander domlander marked this pull request as ready for review April 9, 2026 11:24
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 9, 2026

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.

Comment thread dotcom-rendering/src/components/SelfHostedVideo.island.tsx
Comment thread dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx Outdated
@domlander domlander added the run_chromatic Runs chromatic when label is applied label Apr 9, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Apr 9, 2026
) {
setCurrentTime(ref.current.currentTime);
if (currentRefExists && playerState === 'PLAYING') {
setCurrentTime(ref.current!.currentTime);
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! I didn't know you can force the compiler to remove null and undefined from the type using !

@domlander domlander added the run_chromatic Runs chromatic when label is applied label Apr 14, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Apr 14, 2026
@domlander domlander added the run_chromatic Runs chromatic when label is applied label Apr 14, 2026
@github-actions github-actions Bot removed the run_chromatic Runs chromatic when label is applied label Apr 14, 2026
@domlander domlander merged commit 7e14771 into main Apr 14, 2026
28 checks passed
@domlander domlander deleted the doml/sh-default branch April 14, 2026 13:38
@gu-prout
Copy link
Copy Markdown

gu-prout Bot commented Apr 14, 2026

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

fronts + curation maintenance Departmental tracking: maintenance work, not a fix or a feature Seen-on-PROD

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants