diff --git a/dotcom-rendering/src/components/SelfHostedVideo.importable.tsx b/dotcom-rendering/src/components/SelfHostedVideo.importable.tsx index 3ae217781aa..036e98708bb 100644 --- a/dotcom-rendering/src/components/SelfHostedVideo.importable.tsx +++ b/dotcom-rendering/src/components/SelfHostedVideo.importable.tsx @@ -8,6 +8,7 @@ import { submitClickComponentEvent, submitComponentEvent, } from '../client/ophan/ophan'; +import type { ArticleFormat } from '../lib/articleFormat'; import { getZIndex } from '../lib/getZIndex'; import { generateImageURL } from '../lib/image'; import { useIsInView } from '../lib/useIsInView'; @@ -21,6 +22,7 @@ import { } from '../lib/video'; import { palette } from '../palette'; import type { VideoPlayerFormat } from '../types/mainMedia'; +import { Caption } from './Caption'; import { CardPicture, type Props as CardPictureProps } from './CardPicture'; import { useConfig } from './ConfigContext'; import type { @@ -245,6 +247,9 @@ type Props = { */ containerAspectRatioMobile?: number; containerAspectRatioDesktop?: number; + caption?: string; + format?: ArticleFormat; + isMainMedia?: boolean; }; export const SelfHostedVideo = ({ @@ -269,6 +274,9 @@ export const SelfHostedVideo = ({ maxAspectRatio, containerAspectRatioMobile, containerAspectRatioDesktop, + caption, + format, + isMainMedia, }: Props) => { const adapted = useShouldAdapt(); const { renderingTarget } = useConfig(); @@ -806,6 +814,14 @@ export const SelfHostedVideo = ({ controlsPosition={controlsPosition} activeCue={activeCue} /> + {!!caption && format && ( +