diff --git a/src/components/FullscreenMedia/FullscreenMedia.tsx b/src/components/FullscreenMedia/FullscreenMedia.tsx index 6d1a47ba1..77b568cb0 100644 --- a/src/components/FullscreenMedia/FullscreenMedia.tsx +++ b/src/components/FullscreenMedia/FullscreenMedia.tsx @@ -11,7 +11,13 @@ import './FullscreenMedia.scss'; export type ChildMediaRenderProps = Pick< MediaAllProps, - 'fullscreen' | 'imageClassName' | 'videoClassName' | 'youtubeClassName' | 'className' + | 'fullscreen' + | 'imageClassName' + | 'videoClassName' + | 'youtubeClassName' + | 'className' + | 'previewImg' + | 'autoplay' >; export interface FullscreenMediaProps { @@ -78,6 +84,8 @@ const FullscreenMedia = ({children, showFullscreenIcon = true}: FullscreenMediaP videoClassName: getMediaClass('video'), youtubeClassName: getMediaClass('youtube'), fullscreen: true, + previewImg: undefined, + autoplay: true, })} diff --git a/src/components/Media/Media.tsx b/src/components/Media/Media.tsx index ce71fe055..beb7d22c2 100644 --- a/src/components/Media/Media.tsx +++ b/src/components/Media/Media.tsx @@ -16,6 +16,7 @@ const b = block('Media'); export interface MediaAllProps extends MediaProps, VideoAdditionProps, ImageAdditionProps, QAProps { className?: string; youtubeClassName?: string; + autoplay?: boolean; } export const Media = (props: MediaAllProps) => { @@ -41,6 +42,7 @@ export const Media = (props: MediaAllProps) => { customBarControlsClassName, qa, ratio, + autoplay, } = props; const [hasVideoFallback, setHasVideoFallback] = useState(false); @@ -101,6 +103,7 @@ export const Media = (props: MediaAllProps) => { height={height} fullscreen={fullscreen} analyticsEvents={analyticsEvents} + autoplay={autoplay} /> ); } @@ -132,6 +135,7 @@ export const Media = (props: MediaAllProps) => { customBarControlsClassName, ratio, youtubeClassName, + autoplay, ]); return ( diff --git a/src/components/VideoBlock/VideoBlock.tsx b/src/components/VideoBlock/VideoBlock.tsx index ab77cb25b..44b9509ac 100644 --- a/src/components/VideoBlock/VideoBlock.tsx +++ b/src/components/VideoBlock/VideoBlock.tsx @@ -59,6 +59,7 @@ export interface VideoBlockProps extends AnalyticsEventsBase { playButton?: React.ReactNode; height?: number; fullscreen?: boolean; + autoplay?: boolean; } const VideoBlock = (props: VideoBlockProps) => { @@ -73,6 +74,7 @@ const VideoBlock = (props: VideoBlockProps) => { height, fullscreen, analyticsEvents, + autoplay, } = props; const handleAnalytics = useAnalytics(DefaultEventNames.VideoPreview); @@ -120,7 +122,10 @@ const VideoBlock = (props: VideoBlockProps) => { iframe.id = fullId; if (!previewImg) { - iframe.src = `${src}?${getPageSearchParams(attributes || {})}`; + iframe.src = `${src}?${getPageSearchParams({ + ...(attributes || {}), + ...(autoplay ? AUTOPLAY_ATTRIBUTES : {}), + })}`; } iframe.width = '100%'; @@ -133,7 +138,7 @@ const VideoBlock = (props: VideoBlockProps) => { ref.current.appendChild(iframe); iframeRef.current = iframe; } - }, [stream, record, norender, src, fullId, attributes, iframeRef, previewImg]); + }, [stream, record, norender, src, fullId, attributes, iframeRef, previewImg, autoplay]); useEffect(() => { setHidePreview(false);