diff --git a/dotcom-rendering/fixtures/manual/trails.ts b/dotcom-rendering/fixtures/manual/trails.ts
index abe12789ff0..f6d67f6bc81 100644
--- a/dotcom-rendering/fixtures/manual/trails.ts
+++ b/dotcom-rendering/fixtures/manual/trails.ts
@@ -648,7 +648,7 @@ export const newsletterTrails: [DCRFrontCard, DCRFrontCard] = [
 	},
 ];
 
-export const loopVideoCard: DCRFrontCard = {
+export const selfHostedVideoCard: DCRFrontCard = {
 	...defaultCardProps,
 	dataLinkName: 'news | group-0 | card-@2',
 	url: '/uk-news/2025/jan/22/prince-harry-says-sun-publisher-made-historic-admission-as-he-settles-case',
diff --git a/dotcom-rendering/src/components/Card/Card.tsx b/dotcom-rendering/src/components/Card/Card.tsx
index 87a9dd8608b..baf40d9c4ee 100644
--- a/dotcom-rendering/src/components/Card/Card.tsx
+++ b/dotcom-rendering/src/components/Card/Card.tsx
@@ -42,9 +42,9 @@ import type { Loading } from '../CardPicture';
 import { CardPicture } from '../CardPicture';
 import { Island } from '../Island';
 import { LatestLinks } from '../LatestLinks.importable';
-import { LoopVideo } from '../LoopVideo.importable';
-import type { SubtitleSize } from '../LoopVideoPlayer';
 import { Pill } from '../Pill';
+import { SelfHostedVideo } from '../SelfHostedVideo.importable';
+import type { SubtitleSize } from '../SelfHostedVideoPlayer';
 import { SlideshowCarousel } from '../SlideshowCarousel.importable';
 import { Snap } from '../Snap';
 import { SnapCssSandbox } from '../SnapCssSandbox';
@@ -946,7 +946,7 @@ export const Card = ({
 								priority="critical"
 								defer={{ until: 'visible' }}
 							>
-								<LoopVideo
+								<SelfHostedVideo
 									sources={media.mainMedia.sources}
 									atomId={media.mainMedia.atomId}
 									uniqueId={uniqueId}
diff --git a/dotcom-rendering/src/components/Card/components/CardWrapper.tsx b/dotcom-rendering/src/components/Card/components/CardWrapper.tsx
index 78476ce250e..b4962c0a9cf 100644
--- a/dotcom-rendering/src/components/Card/components/CardWrapper.tsx
+++ b/dotcom-rendering/src/components/Card/components/CardWrapper.tsx
@@ -59,7 +59,7 @@ const hoverStyles = css`
 	*/
 	:has(
 			ul.sublinks:hover,
-			.loop-video-container:hover,
+			.video-container:hover,
 			.slideshow-carousel:hover,
 			.branding-logo:hover
 		) {
diff --git a/dotcom-rendering/src/components/FlexibleGeneral.stories.tsx b/dotcom-rendering/src/components/FlexibleGeneral.stories.tsx
index 2d1da6d9db2..d66839eecc9 100644
--- a/dotcom-rendering/src/components/FlexibleGeneral.stories.tsx
+++ b/dotcom-rendering/src/components/FlexibleGeneral.stories.tsx
@@ -5,8 +5,8 @@ import {
 	audioTrails,
 	galleryTrails,
 	getSublinks,
-	loopVideoCard,
 	opinionTrails,
+	selfHostedVideoCard,
 	slideshowCard,
 	trails,
 	videoTrails,
@@ -542,14 +542,14 @@ export const ImmersiveCardsSplashAndStandard: Story = {
 	},
 };
 
-export const LoopVideoCards: Story = {
-	name: 'Looping video cards',
+export const SelfHostedVideoCards: Story = {
+	name: 'Self-hosted video cards',
 	args: {
-		frontSectionTitle: 'Loop video cards',
+		frontSectionTitle: 'Self-hosted video cards',
 		groupedTrails: {
 			...emptyGroupedTrails,
-			splash: [loopVideoCard],
-			standard: [loopVideoCard], // Loop video is disabled at standard card size
+			splash: [selfHostedVideoCard],
+			standard: [selfHostedVideoCard], // Self-hosted video is disabled at standard card size
 		},
 	},
 };
diff --git a/dotcom-rendering/src/components/FlexibleGeneral.tsx b/dotcom-rendering/src/components/FlexibleGeneral.tsx
index b4ba37ef316..db71a598825 100644
--- a/dotcom-rendering/src/components/FlexibleGeneral.tsx
+++ b/dotcom-rendering/src/components/FlexibleGeneral.tsx
@@ -21,7 +21,7 @@ import type { ResponsiveFontSize } from './CardHeadline';
 import type { Loading } from './CardPicture';
 import { FeatureCard } from './FeatureCard';
 import { FrontCard } from './FrontCard';
-import type { SubtitleSize } from './LoopVideoPlayer';
+import type { SubtitleSize } from './SelfHostedVideoPlayer';
 import type { Alignment } from './SupportingContent';
 
 type Props = {
diff --git a/dotcom-rendering/src/components/FlexibleSpecial.stories.tsx b/dotcom-rendering/src/components/FlexibleSpecial.stories.tsx
index 9df15294040..68bedc335b0 100644
--- a/dotcom-rendering/src/components/FlexibleSpecial.stories.tsx
+++ b/dotcom-rendering/src/components/FlexibleSpecial.stories.tsx
@@ -2,8 +2,8 @@ import { breakpoints } from '@guardian/source/foundations';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { discussionApiUrl } from '../../fixtures/manual/discussionApiUrl';
 import {
-	loopVideoCard,
 	opinionTrails,
+	selfHostedVideoCard,
 	slideshowCard,
 	snapLink,
 	trails,
@@ -280,14 +280,14 @@ export const GigaBoostedSplashWithLiveUpdates: Story = {
 	},
 };
 
-export const LoopVideoCards: Story = {
-	name: 'Looping video cards',
+export const SelfHostedVideoCard: Story = {
+	name: 'Self-hosted video cards',
 	args: {
-		frontSectionTitle: 'Looping video',
+		frontSectionTitle: 'Self-hosted video',
 		groupedTrails: {
 			...emptyGroupedTrails,
 			snap: [],
-			standard: [loopVideoCard],
+			standard: [selfHostedVideoCard],
 		},
 		collectionId: 1,
 	},
diff --git a/dotcom-rendering/src/components/FlexibleSpecial.tsx b/dotcom-rendering/src/components/FlexibleSpecial.tsx
index f161d4e4362..ef6490421a2 100644
--- a/dotcom-rendering/src/components/FlexibleSpecial.tsx
+++ b/dotcom-rendering/src/components/FlexibleSpecial.tsx
@@ -19,7 +19,7 @@ import { UL } from './Card/components/UL';
 import type { ResponsiveFontSize } from './CardHeadline';
 import type { Loading } from './CardPicture';
 import { FrontCard } from './FrontCard';
-import type { SubtitleSize } from './LoopVideoPlayer';
+import type { SubtitleSize } from './SelfHostedVideoPlayer';
 import type { Alignment } from './SupportingContent';
 
 type Props = {
diff --git a/dotcom-rendering/src/components/LoopVideo.importable.tsx b/dotcom-rendering/src/components/SelfHostedVideo.importable.tsx
similarity index 95%
rename from dotcom-rendering/src/components/LoopVideo.importable.tsx
rename to dotcom-rendering/src/components/SelfHostedVideo.importable.tsx
index 2b80188a216..0d4e06deea1 100644
--- a/dotcom-rendering/src/components/LoopVideo.importable.tsx
+++ b/dotcom-rendering/src/components/SelfHostedVideo.importable.tsx
@@ -15,7 +15,7 @@ import { useShouldAdapt } from '../lib/useShouldAdapt';
 import { useSubtitles } from '../lib/useSubtitles';
 import type { CustomPlayEventDetail, Source } from '../lib/video';
 import {
-	customLoopPlayAudioEventName,
+	customSelfHostedVideoPlayAudioEventName,
 	customYoutubePlayEventName,
 } from '../lib/video';
 import { CardPicture, type Props as CardPictureProps } from './CardPicture';
@@ -24,12 +24,12 @@ import type {
 	PLAYER_STATES,
 	PlayerStates,
 	SubtitleSize,
-} from './LoopVideoPlayer';
-import { LoopVideoPlayer } from './LoopVideoPlayer';
+} from './SelfHostedVideoPlayer';
+import { SelfHostedVideoPlayer } from './SelfHostedVideoPlayer';
 import { ophanTrackerWeb } from './YoutubeAtom/eventEmitters';
 
 const videoContainerStyles = css`
-	z-index: ${getZIndex('loop-video-container')};
+	z-index: ${getZIndex('video-container')};
 	position: relative;
 `;
 
@@ -39,21 +39,21 @@ const videoContainerStyles = css`
  */
 export const dispatchCustomPlayAudioEvent = (uniqueId: string) => {
 	document.dispatchEvent(
-		new CustomEvent(customLoopPlayAudioEventName, {
+		new CustomEvent(customSelfHostedVideoPlayAudioEventName, {
 			detail: { uniqueId },
 		}),
 	);
 };
 
 const logAndReportError = (src: string, error: Error) => {
-	const message = `Autoplay failure for loop video. Source: ${src} could not be played. Error: ${String(
+	const message = `Autoplay failure for self-hosted video. Source: ${src} could not be played. Error: ${String(
 		error,
 	)}`;
 
 	if (error instanceof Error) {
 		window.guardian.modules.sentry.reportError(
 			new Error(message),
-			'loop-video',
+			'self-hosted-video',
 		);
 	}
 
@@ -72,7 +72,7 @@ const getOptimisedPosterImage = (mainImage: string): string => {
 
 	return generateImageURL({
 		mainImage,
-		imageWidth: 940, // The widest a looping video can be: Flexible special, giga-boosted
+		imageWidth: 940, // The widest a video can be: flexible special container, giga-boosted slot
 		resolution,
 		aspectRatio: '5:4',
 	});
@@ -95,7 +95,7 @@ const doesVideoHaveAudio = (video: HTMLVideoElement): boolean => {
 			new Error(
 				'Could not determine if video has audio. This is likely due to the browser not supporting the necessary properties.',
 			),
-			'loop-video',
+			'self-hosted-video',
 		);
 
 		return true;
@@ -127,7 +127,7 @@ type Props = {
 	subtitleSize: SubtitleSize;
 };
 
-export const LoopVideo = ({
+export const SelfHostedVideo = ({
 	sources,
 	atomId,
 	uniqueId,
@@ -321,7 +321,7 @@ export const LoopVideo = ({
 		};
 
 		document.addEventListener(
-			customLoopPlayAudioEventName,
+			customSelfHostedVideoPlayAudioEventName,
 			handleCustomPlayAudioEvent,
 		);
 		document.addEventListener(
@@ -339,7 +339,7 @@ export const LoopVideo = ({
 
 		return () => {
 			document.removeEventListener(
-				customLoopPlayAudioEventName,
+				customSelfHostedVideoPlayAudioEventName,
 				handleCustomPlayAudioEvent,
 			);
 			document.removeEventListener(
@@ -573,13 +573,13 @@ export const LoopVideo = ({
 	 * Sentry and log in the console.
 	 */
 	const onError = () => {
-		const message = `Loop video could not be played. source: ${
+		const message = `Self-hosted video could not be played. source: ${
 			vidRef.current?.currentSrc ?? 'unknown'
 		}`;
 
 		window.guardian.modules.sentry.reportError(
 			new Error(message),
-			'loop-video',
+			'self-hosted-video',
 		);
 		log('dotcom', message);
 	};
@@ -643,10 +643,10 @@ export const LoopVideo = ({
 		<figure
 			ref={setNode}
 			css={videoContainerStyles}
-			className="loop-video-container"
+			className="video-container"
 			data-component="gu-video-loop"
 		>
-			<LoopVideoPlayer
+			<SelfHostedVideoPlayer
 				sources={sources}
 				atomId={atomId}
 				uniqueId={uniqueId}
diff --git a/dotcom-rendering/src/components/LoopVideo.stories.tsx b/dotcom-rendering/src/components/SelfHostedVideo.stories.tsx
similarity index 86%
rename from dotcom-rendering/src/components/LoopVideo.stories.tsx
rename to dotcom-rendering/src/components/SelfHostedVideo.stories.tsx
index 379a3b93e6b..42035a0db39 100644
--- a/dotcom-rendering/src/components/LoopVideo.stories.tsx
+++ b/dotcom-rendering/src/components/SelfHostedVideo.stories.tsx
@@ -2,26 +2,26 @@ import { breakpoints } from '@guardian/source/foundations';
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
 import { expect, userEvent, within } from 'storybook/test';
 import { centreColumnDecorator } from '../../.storybook/decorators/gridDecorators';
-import { LoopVideo } from './LoopVideo.importable';
+import { SelfHostedVideo } from './SelfHostedVideo.importable';
 
 const meta = {
-	component: LoopVideo,
-	title: 'Components/LoopVideo',
+	component: SelfHostedVideo,
+	title: 'Components/SelfHostedVideo',
 	decorators: [centreColumnDecorator],
-	render: (args) => <LoopVideo {...args} />,
+	render: (args) => <SelfHostedVideo {...args} />,
 	parameters: {
 		chromatic: {
 			viewports: [breakpoints.mobile, breakpoints.wide],
 			disableSnapshot: true,
 		},
 	},
-} satisfies Meta<typeof LoopVideo>;
+} satisfies Meta<typeof SelfHostedVideo>;
 
 export default meta;
-type Story = StoryObj<typeof LoopVideo>;
+type Story = StoryObj<typeof SelfHostedVideo>;
 
-export const Default: Story = {
-	name: 'Default',
+export const Loop4to5: Story = {
+	name: 'Looping video in 4:5 aspect ratio',
 	args: {
 		sources: [
 			{
@@ -56,10 +56,10 @@ export const Default: Story = {
 // 	},
 // };
 
-export const Without5to4Ratio: Story = {
-	name: 'Without 5:4 aspect ratio',
+export const Loop16to9: Story = {
+	name: 'Looping video in 16:9 aspect ratio',
 	args: {
-		...Default.args,
+		...Loop4to5.args,
 		sources: [
 			{
 				src: 'https://uploads.guim.co.uk/2024/10/01/241001HeleneLoop_2.mp4',
@@ -72,11 +72,11 @@ export const Without5to4Ratio: Story = {
 };
 
 export const PausePlay: Story = {
-	...Default,
+	...Loop4to5,
 	name: 'Pause and play interaction',
 	play: async ({ canvasElement }) => {
 		const canvas = within(canvasElement);
-		const videoEl = canvas.getByTestId('loop-video');
+		const videoEl = canvas.getByTestId('self-hosted-video-player');
 
 		await userEvent.click(videoEl, {
 			delay: 300, // Allow video to start playing.
@@ -93,7 +93,7 @@ export const PausePlay: Story = {
 };
 
 export const UnmuteMute: Story = {
-	...Default,
+	...Loop4to5,
 	name: 'Unmute and mute interaction',
 	parameters: {
 		test: {
@@ -120,11 +120,11 @@ function sleep(ms: number) {
 }
 
 export const InteractionObserver: Story = {
-	...Default,
+	...Loop4to5,
 	name: 'Interaction observer',
 	render: (args) => (
 		<div data-testid="test-container">
-			<LoopVideo {...args} />
+			<SelfHostedVideo {...args} />
 			<div style={{ height: '100vh' }}></div>
 			<p data-testid="page-end">End of page</p>
 		</div>
diff --git a/dotcom-rendering/src/components/LoopVideoPlayer.tsx b/dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx
similarity index 91%
rename from dotcom-rendering/src/components/LoopVideoPlayer.tsx
rename to dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx
index d975e7bb45f..ab8015ce76b 100644
--- a/dotcom-rendering/src/components/LoopVideoPlayer.tsx
+++ b/dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx
@@ -17,8 +17,8 @@ import type { ActiveCue } from '../lib/useSubtitles';
 import type { Source } from '../lib/video';
 import { palette } from '../palette';
 import { narrowPlayIconWidth, PlayIcon } from './Card/components/PlayIcon';
-import { LoopVideoProgressBar } from './LoopVideoProgressBar';
 import { SubtitleOverlay } from './SubtitleOverlay';
+import { VideoProgressBar } from './VideoProgressBar';
 
 export type SubtitleSize = 'small' | 'medium' | 'large';
 
@@ -40,7 +40,7 @@ const videoStyles = (
 		/* Hide the cue by default as we prefer custom overlay */
 		visibility: hidden;
 
-		color: ${palette('--loop-video-subtitle-text')};
+		color: ${palette('--video-subtitle-text')};
 		${subtitleSize === 'small' && textSans15};
 		${subtitleSize === 'medium' && textSans17};
 		${subtitleSize === 'large' && textSans20};
@@ -75,9 +75,9 @@ const audioIconContainerStyles = css`
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	background-color: ${palette('--loop-video-audio-icon-background')};
+	background-color: ${palette('--video-audio-icon-background')};
 	border-radius: 50%;
-	border: 1px solid ${palette('--loop-video-audio-icon-border')};
+	border: 1px solid ${palette('--video-audio-icon-border')};
 `;
 
 export const PLAYER_STATES = [
@@ -132,11 +132,11 @@ type Props = {
  * https://react.dev/reference/react/forwardRef
  */
 /**
- * NB: To develop the loop video player locally, use `https://r.thegulocal.com/` instead of `localhost`.
+ * NB: To develop the video player locally, use `https://r.thegulocal.com/` instead of `localhost`.
  * This is required because CORS restrictions prevent accessing the subtitles and video file from localhost.
  */
 
-export const LoopVideoPlayer = forwardRef(
+export const SelfHostedVideoPlayer = forwardRef(
 	(
 		{
 			sources,
@@ -168,17 +168,18 @@ export const LoopVideoPlayer = forwardRef(
 		}: Props,
 		ref: React.ForwardedRef<HTMLVideoElement>,
 	) => {
-		const loopVideoId = `loop-video-${uniqueId}`;
+		const videoId = `video-${uniqueId}`;
+
 		return (
 			<>
 				{/* eslint-disable-next-line jsx-a11y/media-has-caption -- Captions will be considered later. */}
 				<video
-					id={loopVideoId}
+					id={videoId}
 					css={videoStyles(width, height, subtitleSize)}
 					crossOrigin="anonymous"
 					ref={ref}
 					tabIndex={0}
-					data-testid="loop-video"
+					data-testid="self-hosted-video-player"
 					height={height}
 					width={width}
 					data-link-name={`gu-video-loop-${
@@ -249,8 +250,8 @@ export const LoopVideoPlayer = forwardRef(
 							</button>
 						)}
 						{/* Progress bar */}
-						<LoopVideoProgressBar
-							videoId={loopVideoId}
+						<VideoProgressBar
+							videoId={videoId}
 							currentTime={currentTime}
 							duration={ref.current.duration}
 						/>
@@ -273,9 +274,7 @@ export const LoopVideoPlayer = forwardRef(
 									<AudioIcon
 										size="xsmall"
 										theme={{
-											fill: palette(
-												'--loop-video-audio-icon',
-											),
+											fill: palette('--video-audio-icon'),
 										}}
 									/>
 								</div>
diff --git a/dotcom-rendering/src/components/SubtitleOverlay.tsx b/dotcom-rendering/src/components/SubtitleOverlay.tsx
index ef8c8484fbc..8874d7cd061 100644
--- a/dotcom-rendering/src/components/SubtitleOverlay.tsx
+++ b/dotcom-rendering/src/components/SubtitleOverlay.tsx
@@ -6,7 +6,7 @@ import {
 	textSans20,
 } from '@guardian/source/foundations';
 import { palette } from '../palette';
-import type { SubtitleSize } from './LoopVideoPlayer';
+import type { SubtitleSize } from './SelfHostedVideoPlayer';
 
 const subtitleOverlayStyles = css`
 	max-width: 71%;
@@ -25,9 +25,9 @@ const cueBoxStyles = css`
 `;
 
 const cueStyles = css`
-	color: ${palette('--loop-video-subtitle-text')};
+	color: ${palette('--video-subtitle-text')};
 	display: inline;
-	background-color: ${palette('--loop-video-subtitle-background')};
+	background-color: ${palette('--video-subtitle-background')};
 	-webkit-box-decoration-break: clone;
 	box-decoration-break: clone;
 	pointer-events: none;
diff --git a/dotcom-rendering/src/components/LoopVideoProgressBar.tsx b/dotcom-rendering/src/components/VideoProgressBar.tsx
similarity index 81%
rename from dotcom-rendering/src/components/LoopVideoProgressBar.tsx
rename to dotcom-rendering/src/components/VideoProgressBar.tsx
index b731538d201..1c996f7b7aa 100644
--- a/dotcom-rendering/src/components/LoopVideoProgressBar.tsx
+++ b/dotcom-rendering/src/components/VideoProgressBar.tsx
@@ -8,16 +8,16 @@ const styles = css`
 	left: 0;
 	height: 4px;
 	width: 100%;
-	z-index: ${getZIndex('loop-video-progress-bar-background')};
-	background-color: ${palette('--loop-video-progress-bar-background')};
+	z-index: ${getZIndex('video-progress-bar-background')};
+	background-color: ${palette('--video-progress-bar-background')};
 `;
 
 const foregroundStyles = (progressPercentage: number) => css`
 	position: absolute;
 	height: 100%;
 	width: ${progressPercentage}%;
-	z-index: ${getZIndex('loop-video-progress-bar-foreground')};
-	background-color: ${palette('--loop-video-progress-bar-value')};
+	z-index: ${getZIndex('video-progress-bar-foreground')};
+	background-color: ${palette('--video-progress-bar-value')};
 	/**
 	 * Don't show a transition when the progress bar returns to the start.
 	 */
@@ -31,16 +31,12 @@ type Props = {
 };
 
 /**
- * A progress bar for the loop video component.
+ * A progress bar for the self-hosted video component.
  *
  * Q. Why don't we use the <progress /> element?
  * A. It was not possible to properly style the native progress element in Safari.
  */
-export const LoopVideoProgressBar = ({
-	videoId,
-	currentTime,
-	duration,
-}: Props) => {
+export const VideoProgressBar = ({ videoId, currentTime, duration }: Props) => {
 	if (duration <= 0) return null;
 
 	/**
diff --git a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomPlayer.tsx b/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomPlayer.tsx
index 24ad7a15fab..d888eda00e4 100644
--- a/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomPlayer.tsx
+++ b/dotcom-rendering/src/components/YoutubeAtom/YoutubeAtomPlayer.tsx
@@ -15,7 +15,7 @@ import { getZIndex } from '../../lib/getZIndex';
 import { getAuthStatus } from '../../lib/identity';
 import type { CustomPlayEventDetail } from '../../lib/video';
 import {
-	customLoopPlayAudioEventName,
+	customSelfHostedVideoPlayAudioEventName,
 	customYoutubePlayEventName,
 } from '../../lib/video';
 import type { AdTargeting } from '../../types/commercial';
@@ -629,10 +629,10 @@ export const YoutubeAtomPlayer = ({
 					handleCustomPlayEvent;
 
 				/**
-				 * Pauses all playing videos when a looping video is unmuted. If a user is
-				 * watching a looping video with sound, any playing Youtube video is paused.
+				 * Pauses all playing videos when a self-hosted video is unmuted. If a user is
+				 * watching a self-hosted video with sound, any playing Youtube video is paused.
 				 */
-				const handleCustomPlayLoopAudioEvent = (
+				const handleCustomPlaySelfHostedAudioEvent = (
 					event: CustomEventInit<CustomPlayEventDetail>,
 				) => {
 					if (event.detail) {
@@ -647,11 +647,12 @@ export const YoutubeAtomPlayer = ({
 				};
 
 				document.addEventListener(
-					customLoopPlayAudioEventName,
-					handleCustomPlayLoopAudioEvent,
+					customSelfHostedVideoPlayAudioEventName,
+					handleCustomPlaySelfHostedAudioEvent,
 				);
-				customListeners.current[customLoopPlayAudioEventName] =
-					handleCustomPlayLoopAudioEvent;
+				customListeners.current[
+					customSelfHostedVideoPlayAudioEventName
+				] = handleCustomPlaySelfHostedAudioEvent;
 
 				playerListeners.current.push(
 					{ name: 'onReady', listener: onReadyListener },
diff --git a/dotcom-rendering/src/lib/getZIndex.ts b/dotcom-rendering/src/lib/getZIndex.ts
index 08627c94015..5ae75b02510 100644
--- a/dotcom-rendering/src/lib/getZIndex.ts
+++ b/dotcom-rendering/src/lib/getZIndex.ts
@@ -86,10 +86,10 @@ const indices = [
 	'bodyArea',
 	'rightColumnArea',
 
-	// Loop video container
-	'loop-video-progress-bar-foreground',
-	'loop-video-progress-bar-background',
-	'loop-video-container',
+	// Self-hosted video
+	'video-progress-bar-foreground',
+	'video-progress-bar-background',
+	'video-container',
 
 	// Main media
 	'mainMedia',
diff --git a/dotcom-rendering/src/lib/useSubtitles.ts b/dotcom-rendering/src/lib/useSubtitles.ts
index 2dad5b43c49..157a23554b7 100644
--- a/dotcom-rendering/src/lib/useSubtitles.ts
+++ b/dotcom-rendering/src/lib/useSubtitles.ts
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import type { PlayerStates } from '../components/LoopVideoPlayer';
+import type { PlayerStates } from '../components/SelfHostedVideoPlayer';
 
 type Props = {
 	video: HTMLVideoElement | null;
diff --git a/dotcom-rendering/src/lib/video.ts b/dotcom-rendering/src/lib/video.ts
index aab47a23d8d..757fcc778f0 100644
--- a/dotcom-rendering/src/lib/video.ts
+++ b/dotcom-rendering/src/lib/video.ts
@@ -1,6 +1,7 @@
 export type CustomPlayEventDetail = { uniqueId: string };
 
-export const customLoopPlayAudioEventName = 'looping-video:play-with-audio';
+export const customSelfHostedVideoPlayAudioEventName =
+	'self-hosted-video:play-with-audio';
 export const customYoutubePlayEventName = 'youtube-video:play';
 
 export type Source = {
diff --git a/dotcom-rendering/src/paletteDeclarations.ts b/dotcom-rendering/src/paletteDeclarations.ts
index 6a4752c5e1c..d04a30bf7fe 100644
--- a/dotcom-rendering/src/paletteDeclarations.ts
+++ b/dotcom-rendering/src/paletteDeclarations.ts
@@ -7313,34 +7313,6 @@ const paletteColours = {
 		light: () => sourcePalette.neutral[20],
 		dark: () => sourcePalette.neutral[86],
 	},
-	'--loop-video-audio-icon': {
-		light: () => sourcePalette.neutral[100],
-		dark: () => sourcePalette.neutral[100],
-	},
-	'--loop-video-audio-icon-background': {
-		light: () => transparentColour(sourcePalette.neutral[7], 0.7),
-		dark: () => transparentColour(sourcePalette.neutral[7], 0.7),
-	},
-	'--loop-video-audio-icon-border': {
-		light: () => sourcePalette.neutral[60],
-		dark: () => sourcePalette.neutral[60],
-	},
-	'--loop-video-progress-bar-background': {
-		light: () => transparentColour(sourcePalette.neutral[7], 0.7),
-		dark: () => transparentColour(sourcePalette.neutral[7], 0.7),
-	},
-	'--loop-video-progress-bar-value': {
-		light: () => sourcePalette.neutral[86],
-		dark: () => sourcePalette.neutral[86],
-	},
-	'--loop-video-subtitle-background': {
-		light: () => transparentColour(sourcePalette.neutral[7], 0.7),
-		dark: () => transparentColour(sourcePalette.neutral[7], 0.7),
-	},
-	'--loop-video-subtitle-text': {
-		light: () => sourcePalette.neutral[100],
-		dark: () => sourcePalette.neutral[100],
-	},
 	'--masthead-nav-background': {
 		light: mastheadNavBackground,
 		dark: mastheadNavBackground,
@@ -8153,6 +8125,34 @@ const paletteColours = {
 		light: () => sourcePalette.neutral[46],
 		dark: () => sourcePalette.neutral[60],
 	},
+	'--video-audio-icon': {
+		light: () => sourcePalette.neutral[100],
+		dark: () => sourcePalette.neutral[100],
+	},
+	'--video-audio-icon-background': {
+		light: () => transparentColour(sourcePalette.neutral[7], 0.7),
+		dark: () => transparentColour(sourcePalette.neutral[7], 0.7),
+	},
+	'--video-audio-icon-border': {
+		light: () => sourcePalette.neutral[60],
+		dark: () => sourcePalette.neutral[60],
+	},
+	'--video-progress-bar-background': {
+		light: () => transparentColour(sourcePalette.neutral[7], 0.7),
+		dark: () => transparentColour(sourcePalette.neutral[7], 0.7),
+	},
+	'--video-progress-bar-value': {
+		light: () => sourcePalette.neutral[86],
+		dark: () => sourcePalette.neutral[86],
+	},
+	'--video-subtitle-background': {
+		light: () => transparentColour(sourcePalette.neutral[7], 0.7),
+		dark: () => transparentColour(sourcePalette.neutral[7], 0.7),
+	},
+	'--video-subtitle-text': {
+		light: () => sourcePalette.neutral[100],
+		dark: () => sourcePalette.neutral[100],
+	},
 	'--witness-title-author': {
 		light: witnessTitleAuthor,
 		dark: witnessTitleAuthor,