diff --git a/common/views/components/VideoEmbed/VideoEmbed.tsx b/common/views/components/VideoEmbed/VideoEmbed.tsx index 77ed17975e..f64f55a2e2 100644 --- a/common/views/components/VideoEmbed/VideoEmbed.tsx +++ b/common/views/components/VideoEmbed/VideoEmbed.tsx @@ -8,8 +8,12 @@ import CollapsibleContent from '@weco/common/views/components/CollapsibleContent import { IframeContainer } from '@weco/common/views/components/Iframe/Iframe'; import PrismicHtmlBlock from '@weco/common/views/components/PrismicHtmlBlock/PrismicHtmlBlock'; +export type VideoProvider = 'YouTube' | 'Vimeo'; + export type Props = { embedUrl: string; + videoProvider?: VideoProvider; + videoThumbnail?: string; caption?: prismic.RichTextField; transcript?: prismic.RichTextField; hasFullSizePoster?: boolean; @@ -54,6 +58,8 @@ const VideoTrigger = styled.button<{ $hasFullSizePoster?: boolean }>` const VideoEmbed: FunctionComponent = ({ embedUrl, + videoProvider, + videoThumbnail, caption, transcript, hasFullSizePoster, @@ -61,7 +67,8 @@ const VideoEmbed: FunctionComponent = ({ const [isActive, setIsActive] = useState(false); const id = embedUrl.match(/embed\/(.*)\?/)?.[1]; const hasAnalyticsConsent = getConsentState('analytics'); - const isYouTube = embedUrl.indexOf('youtube') >= 0; + const isYouTube = videoProvider === 'YouTube'; + const isVimeo = videoProvider === 'Vimeo'; useEffect(() => { if (isYouTube && hasAnalyticsConsent) { @@ -86,17 +93,31 @@ const VideoEmbed: FunctionComponent = ({ } }, []); + const videoSrc = isYouTube + ? `${embedUrl}&enablejsapi=1&autoplay=1` + : isVimeo + ? `${embedUrl}&autoplay=1` + : undefined; + + const thumbnailSrc = isYouTube + ? `https://img.youtube.com/vi/${id}/${ + hasFullSizePoster ? 'maxresdefault' : 'hqdefault' + }.jpg` + : isVimeo + ? videoThumbnail + : undefined; + return ( <> - {isActive ? ( + {isActive && videoSrc ? (