Skip to content

Custom fullscreen controls #15845

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
abeddow91 merged 4 commits into from
May 13, 2026
+34 −3
Merged

Custom fullscreen controls #15845

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e0e0004
Add playerContainerRef to SelfHostedVideoPlayer for improved control …
abeddow91 May 11, 2026
bc239ff
Check we have access to player container reference before requesting …
abeddow91 May 11, 2026
02fa417
Add styles to correctly contain the video in fullscreen so that the w…
abeddow91 May 12, 2026
3136a0a
Use palette for background colour
abeddow91 May 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion dotcom-rendering/src/components/SelfHostedVideo.island.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -370,6 +370,7 @@ export const SelfHostedVideo = ({
const adapted = useShouldAdapt();
const { renderingTarget } = useConfig();
const vidRef = useRef<HTMLVideoElement>(null);
const playerContainerRef = useRef<HTMLDivElement>(null);
const [isPlayable, setIsPlayable] = useState(false);
const [isMuted, setIsMuted] = useState(true);
const [showPosterImage, setShowPosterImage] = useState<boolean>(false);
Expand Down Expand Up @@ -808,8 +809,9 @@ export const SelfHostedVideo = ({

if (document.fullscreenElement) {
void document.exitFullscreen();
} else if (playerContainerRef.current) {
void playerContainerRef.current.requestFullscreen();
}
void video.requestFullscreen();
};

/**
Expand Down Expand Up @@ -1013,6 +1015,7 @@ export const SelfHostedVideo = ({
FallbackImageComponent={FallbackImageComponent}
currentTime={currentTime}
ref={vidRef}
playerContainerRef={playerContainerRef}
isMuted={isMuted}
handleLoadedMetadata={handleLoadedMetadata}
handleLoadedData={handleLoadedData}
Expand Down
28 changes: 26 additions & 2 deletions dotcom-rendering/src/components/SelfHostedVideoPlayer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,28 @@ const videoStyles = (aspectRatio: number) => css`
aspect-ratio: ${aspectRatio};
`;

const playerContainerStyles = css`
&:fullscreen {
display: flex;
align-items: center;
justify-content: center;
background-color: ${palette('--video-fullscreen-background')};
width: 100vw;
height: 100vh;

/* Override the fixed aspect-ratio + width:100% on the video so it
fits within the screen while preserving its aspect ratio. */
video {
width: 100%;
height: 100%;
max-width: 100vw;
max-height: 100vh;
aspect-ratio: auto;
object-fit: contain;
}
}
`;

const videoControlsStyles = css`
height: 100%;
width: 100%;
Expand Down Expand Up @@ -143,6 +165,7 @@ export type Props = {
isInteractive: boolean;
iconsPosition: ControlsPosition;
subtitlesPosition: SubtitlesPosition;
playerContainerRef: React.RefObject<HTMLDivElement>;
};

/**
Expand Down Expand Up @@ -196,6 +219,7 @@ export const SelfHostedVideoPlayer = forwardRef(
isInteractive,
iconsPosition,
subtitlesPosition,
playerContainerRef,
}: Props,
ref: React.ForwardedRef<HTMLVideoElement>,
) => {
Expand All @@ -212,7 +236,7 @@ export const SelfHostedVideoPlayer = forwardRef(
}-${atomId}`;

return (
<>
<div ref={playerContainerRef} css={playerContainerStyles}>
{/* eslint-disable-next-line jsx-a11y/media-has-caption -- Not all videos require captions. */}
<video
id={videoId}
Expand Down Expand Up @@ -324,7 +348,7 @@ export const SelfHostedVideoPlayer = forwardRef(
</div>
)}
</div>
</>
</div>
);
},
);
4 changes: 4 additions & 0 deletions dotcom-rendering/src/paletteDeclarations.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8433,6 +8433,10 @@ const paletteColours = {
light: () => sourcePalette.neutral[93],
dark: () => sourcePalette.neutral[93],
},
'--video-fullscreen-background': {
light: () => sourcePalette.neutral[0],
dark: () => sourcePalette.neutral[0],
},
'--video-icon': {
light: () => sourcePalette.neutral[100],
dark: () => sourcePalette.neutral[100],
Expand Down
Loading