fix: In mobile view, moves the play pause button to the top left (#868)

* In mobile view, moves the play button to the top left

* Snapshot

* Refactor media query

---------

Co-authored-by: Andy E Phipps <a.phipps@comicrelief.com>

Author: curlyfriesplease

src/components/Atoms/AmbientVideo/AmbientVideo.style.js

@@ -77,7 +77,8 @@ const PlayPauseIcon = styled.span`
 
 const PlayPauseButton = styled.button`
   position: absolute;
-  bottom: 15px;
+  top: 15px;
+  bottom: auto;
   left: 15px;
   width: 35px;
   height: 35px;
@@ -100,6 +101,15 @@ const PlayPauseButton = styled.button`
     transform: translateX(2px);
   }
 
+  // Play icon needs to go to the top left on mobile
+  // as with the hero banner, the text container can
+  // overlap it. Here in desktop view it can come
+  // back to the bottom.
+  @media ${({ theme }) => theme.allBreakpoints('L')} {
+    bottom: 15px;
+    top: auto;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     display: none;
   }

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

@@ -40,7 +40,8 @@ exports[`renders AmbientVideo when video props are provided correctly 1`] = `
 
 .c6 {
   position: absolute;
-  bottom: 15px;
+  top: 15px;
+  bottom: auto;
   left: 15px;
   width: 35px;
   height: 35px;
@@ -94,6 +95,13 @@ exports[`renders AmbientVideo when video props are provided correctly 1`] = `
   }
 }
 
+@media (min-width:1024px) {
+  .c6 {
+    bottom: 15px;
+    top: auto;
+  }
+}
+
 @media (prefers-reduced-motion:reduce) {
   .c6 {
     display: none;