diff --git a/src/components/Atoms/AmbientVideo/AmbientVideo.style.js b/src/components/Atoms/AmbientVideo/AmbientVideo.style.js
index fa7f9fb09..78ec7b945 100644
--- a/src/components/Atoms/AmbientVideo/AmbientVideo.style.js
+++ b/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;
   }
diff --git a/src/components/Molecules/PictureOrVideo/__snapshots__/PictureOrVideo.test.js.snap b/src/components/Molecules/PictureOrVideo/__snapshots__/PictureOrVideo.test.js.snap
index 0508269a6..cae02fb22 100644
--- a/src/components/Molecules/PictureOrVideo/__snapshots__/PictureOrVideo.test.js.snap
+++ b/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;