fix: Stop StyledVideo from loading both video files (#875)

* Limits the ability of the StyledVideo component to load in both video files

* fix: Empty commit to trigger CI

Author: curlyfriesplease

src/components/Atoms/AmbientVideo/AmbientVideo.js

@@ -20,6 +20,8 @@ import {
 // Normalise webpack module object ({ default }) or string to video URL
 const normaliseSrc = value => (typeof value === 'string' ? value : value?.default);
 
+const belowLBreakpointMediaString = `(max-width: ${breakpointValues.L - 1}px)`;
+
 const AmbientVideo = ({
   src,
   srcMobile,
@@ -32,8 +34,9 @@ const AmbientVideo = ({
   const videoRef = useRef(null);
   const [isPlaying, setIsPlaying] = useState(true);
   const isBelowL = useMediaQuery({ maxWidth: breakpointValues.L - 1 });
-  const rawSrc = srcMobile && isBelowL ? srcMobile : src;
-  const effectiveSrc = normaliseSrc(rawSrc);
+  const desktopSrc = normaliseSrc(src);
+  const mobileSrc = srcMobile ? normaliseSrc(srcMobile) : null;
+  // <video> only supports one poster URL; keep JS breakpoint for poster / fallback stills.
   const rawPoster = posterMobile && isBelowL ? posterMobile : poster;
   const effectivePoster = rawPoster ? normaliseSrc(rawPoster) : undefined;
 
@@ -72,7 +75,6 @@ const AmbientVideo = ({
     <VideoWrapper>
       <StyledVideo
         ref={videoRef}
-        src={effectiveSrc}
         poster={effectivePoster}
         controls={showFullControls}
         controlsList={showFullControls ? 'nodownload nofullscreen noremoteplayback' : undefined}
@@ -82,6 +84,10 @@ const AmbientVideo = ({
         onPlay={handlePlay}
         onPause={handlePause}
       >
+        {mobileSrc ? (
+          <source src={mobileSrc} type="video/mp4" media={belowLBreakpointMediaString} />
+        ) : null}
+        <source src={desktopSrc} type="video/mp4" />
         {effectivePoster ? (
           <FallbackImg src={effectivePoster} alt="Video playback not supported" />
         ) : (

src/components/Molecules/PictureOrVideo/__snapshots__/PictureOrVideo.test.js.snap

@@ -122,8 +122,16 @@ exports[`renders AmbientVideo when video props are provided correctly 1`] = `
     onPlay={[Function]}
     playsInline={true}
     poster="//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w"
-    src="https://example.com/video-desktop.mp4"
   >
+    <source
+      media="(max-width: 1023px)"
+      src="https://example.com/video-mobile.mp4"
+      type="video/mp4"
+    />
+    <source
+      src="https://example.com/video-desktop.mp4"
+      type="video/mp4"
+    />
     <img
       alt="Video playback not supported"
       className="c3"