Use optimal self-hosted video for user by width by domlander · Pull Request #15561 · guardian/dotcom-rendering

domlander · 2026-03-19T12:09:23Z

What does this change?

Selects the optimal video from the list of video sources. Selects the best set of dimensions for the users screen size.

Use the same logic when extracting sources from assets for both fronts and articles.

Why?

To serve smaller videos to users without any reduction in video quality.

Logic for extracting sources is likely to be the same for both fronts and articles. Combining the logic into one function ensures that changes to one will affect the other.

github-actions · 2026-03-19T12:13:08Z

Deploy build 25802 of `dotcom:rendering-all` to CODE

All deployment options

From guardian/actions-riff-raff.

github-actions · 2026-03-23T15:24:06Z

Deploy build 1104 of `dotcom:ab-testing` to CODE

All deployment options

From guardian/actions-riff-raff.

dotcom-rendering/src/lib/video.test.ts

github-actions · 2026-03-25T09:37:15Z

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.

domlander · 2026-03-25T16:31:30Z

dotcom-rendering/src/frontend/schemas/feFootballMatchInfoPage.json

                "footballMatch": {
                    "$ref": "#/definitions/{id:string;homeTeam:{name:string;id:string;scorers:string[];codename:string;players:{name:string;id:string;position:string;lastName:string;substitute:boolean;timeOnPitch:string;shirtNumber:string;events:{eventTime:string;eventType:string;}[];}[];possession:number;shotsOn:number;shotsOff:number;corners:number;fouls:number;colours:string;crest:string;score?:number;};awayTeam:{name:string;id:string;scorers:string[];codename:string;players:{name:string;id:string;position:string;lastName:string;substitute:boolean;timeOnPitch:string;shirtNumber:string;events:{eventTime:string;eventType:string;}[];}[];possession:number;shotsOn:number;shotsOff:number;corners:number;fouls:number;colours:string;crest:string;score?:number;};status:string;comments?:string;}"
                },
                "matchInfo": {


Please ignore these changes - these are temporary to allow CI to run. It is not intended that these will be a part of this PR when it gets merged.

OK, these changes are a part of the changeset when running make gen-schemas. I've narrowed it down to the changes in the video.ts file, but I cannot explain why. Since these changes are harmless, I will continue.

davidfurey

Great to share this code between articles and fronts. Sorry, I haven't reviewed the whole thing but have made a couple of comments.

dotcom-rendering/src/lib/video.ts

dotcom-rendering/src/lib/video.test.ts

abeddow91 · 2026-03-25T16:58:01Z

dotcom-rendering/src/lib/video.ts

+		return DEFAULT_ASPECT_RATIO;
+	}
+
+	return firstSource.width / firstSource.height;


Why have you opted to calculate the aspect ratio rather than taking it from the video asset?

Good point. I'll convert the string into a number, so that the aspect ratio defined on the video source is the source of truth for the aspect ratio passed into the component.

Brilliant, this should help with m3u8 as well which are only passed with the aspect ratio, not the dimensions

…nsions

abeddow91 · 2026-04-01T09:02:15Z

dotcom-rendering/src/model/enhanceCards.ts

+			const videoAssets =
+				convertFEMediaAssetsToVideoAssets(selfHostedAssets);
+			const sources = extractValidSourcesFromAssets(videoAssets);
+
+			const aspectRatio = getAspectRatioFromSources(sources);


This is all much cleaner to read 👏

abeddow91

Fantastic, this looks great!

domlander self-assigned this Mar 19, 2026

domlander added run_chromatic Runs chromatic when label is applied fronts + curation maintenance Departmental tracking: maintenance work, not a fix or a feature labels Mar 19, 2026

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Mar 19, 2026

domlander force-pushed the doml/sh-optimise-video-source branch from fa4b4f0 to be2b4d6 Compare March 23, 2026 15:22

domlander force-pushed the doml/sh-optimise-video-source branch from be2b4d6 to 0e973f4 Compare March 23, 2026 15:48

domlander changed the title ~~WIP Pick best self-hosted video for user by dimensions~~ Use optimal self-hosted video for user by width Mar 23, 2026

domlander added the run_chromatic Runs chromatic when label is applied label Mar 23, 2026

github-actions bot removed the run_chromatic Runs chromatic when label is applied label Mar 23, 2026

abeddow91 reviewed Mar 23, 2026

View reviewed changes

dotcom-rendering/src/lib/video.test.ts Outdated Show resolved Hide resolved

domlander force-pushed the doml/sh-optimise-video-source branch from 0e973f4 to 24275c2 Compare March 25, 2026 09:29

domlander added the run_chromatic Runs chromatic when label is applied label Mar 25, 2026