diff --git a/package-lock.json b/package-lock.json
index b71f54f7b38..de9a4770a21 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3488,13 +3488,13 @@
       }
     },
     "@bbc/psammead-media-player": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@bbc/psammead-media-player/-/psammead-media-player-2.4.1.tgz",
-      "integrity": "sha512-aDxb+BPiLLTSfh0MmzMEmgYU2gHcchRgSRMsUFWzrtrtE/I+Yp2rnzn0mk6YGN3dQ62tw/snBATkKcRTu+7KEw==",
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/@bbc/psammead-media-player/-/psammead-media-player-2.5.0.tgz",
+      "integrity": "sha512-bKZjOg5HeYUni21ZNuQCORGOCJiPTKgBvFlzAF3jOXN2jNDKIOgF/1goPC/eRkZHEJnQ3LrHSSZYuQnrfnKK0g==",
       "requires": {
         "@bbc/psammead-assets": "^2.10.3",
         "@bbc/psammead-image": "^1.2.4",
-        "@bbc/psammead-play-button": "^1.1.4"
+        "@bbc/psammead-play-button": "^1.1.6"
       }
     },
     "@bbc/psammead-navigation": {
@@ -3517,11 +3517,11 @@
       }
     },
     "@bbc/psammead-play-button": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/@bbc/psammead-play-button/-/psammead-play-button-1.1.4.tgz",
-      "integrity": "sha512-FDFpzDbtocFNhgs8MQiqF0ZwID2l5R8ZkuFTNCZgFgm8NatuzNbPu8+o0JmFz5RZjgbWNB4S1GY9MQdm6qf/wQ==",
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@bbc/psammead-play-button/-/psammead-play-button-1.1.6.tgz",
+      "integrity": "sha512-Q3tlO9a7TbKAZwje9jt9TDNzb9bx/vOoXYiW8LJ4ybDr56w1DyNu0fE2HRUheSb2RMX1GSING6ZpxhxUe2PHhw==",
       "requires": {
-        "@bbc/gel-foundations": "^3.4.1",
+        "@bbc/gel-foundations": "^3.4.2",
         "@bbc/psammead-assets": "^2.10.3",
         "@bbc/psammead-styles": "^4.1.2"
       }
diff --git a/package.json b/package.json
index a7fdd753857..bafcf544dc9 100644
--- a/package.json
+++ b/package.json
@@ -75,7 +75,7 @@
     "@bbc/psammead-inline-link": "^1.3.18",
     "@bbc/psammead-locales": "^4.1.1",
     "@bbc/psammead-media-indicator": "^2.6.19",
-    "@bbc/psammead-media-player": "^2.4.1",
+    "@bbc/psammead-media-player": "^2.5.0",
     "@bbc/psammead-navigation": "^3.0.5",
     "@bbc/psammead-paragraph": "^2.2.20",
     "@bbc/psammead-rich-text-transforms": "^2.0.0",
diff --git a/src/app/containers/ArticleMediaPlayer/__snapshots__/index.test.jsx.snap b/src/app/containers/ArticleMediaPlayer/__snapshots__/index.test.jsx.snap
index 01faca347a6..4851eb725af 100644
--- a/src/app/containers/ArticleMediaPlayer/__snapshots__/index.test.jsx.snap
+++ b/src/app/containers/ArticleMediaPlayer/__snapshots__/index.test.jsx.snap
@@ -203,12 +203,12 @@ exports[`MediaPlayer Calls the canonical media player, with a placeholder 1`] =
 }
 
 .c4 {
-  cursor: pointer;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
+  cursor: default;
 }
 
 .c9 {
diff --git a/src/app/containers/CpsAssetMediaPlayer/__snapshots__/index.test.jsx.snap b/src/app/containers/CpsAssetMediaPlayer/__snapshots__/index.test.jsx.snap
index b308d4aebc3..f2e9b18709a 100644
--- a/src/app/containers/CpsAssetMediaPlayer/__snapshots__/index.test.jsx.snap
+++ b/src/app/containers/CpsAssetMediaPlayer/__snapshots__/index.test.jsx.snap
@@ -132,13 +132,18 @@ exports[`MediaPlayer render the canonical player without a placeholder 1`] = `
 }
 
 .c3 {
+  left: 0;
+  overflow: hidden;
   position: absolute;
   top: 0;
-  left: 0;
   width: 100%;
   height: 100%;
+}
+
+.c4 {
   border: 0;
-  overflow: hidden;
+  height: 100%;
+  width: 100%;
 }
 
 @media (max-width:63rem) {
@@ -197,14 +202,18 @@ exports[`MediaPlayer render the canonical player without a placeholder 1`] = `
           <div
             class="c2"
           >
-            <iframe
-              allow="autoplay; fullscreen"
-              allowfullscreen=""
+            <div
               class="c3"
-              scrolling="no"
-              src="https://polling.test.bbc.co.uk/ws/av-embeds/cps/pidgin/123456789/p01k6msp/en-GB"
-              title="Media player"
-            />
+            >
+              <iframe
+                allow="autoplay; fullscreen"
+                allowfullscreen=""
+                class="c4"
+                scrolling="no"
+                src="https://polling.test.bbc.co.uk/ws/av-embeds/cps/pidgin/123456789/p01k6msp/en-GB"
+                title="Media player"
+              />
+            </div>
           </div>
         </figure>
       </div>
diff --git a/src/app/containers/CpsAssetPageMain/__snapshots__/index.test.jsx.snap b/src/app/containers/CpsAssetPageMain/__snapshots__/index.test.jsx.snap
index b7145b9df9f..8f46dc86823 100644
--- a/src/app/containers/CpsAssetPageMain/__snapshots__/index.test.jsx.snap
+++ b/src/app/containers/CpsAssetPageMain/__snapshots__/index.test.jsx.snap
@@ -9,16 +9,16 @@ exports[`CpsAssetPageMain MAP AV player should render version (live audio stream
   padding-bottom: 2rem;
 }
 
-.c9 {
+.c10 {
   grid-column: 1 / span 6;
 }
 
-.c18 {
+.c19 {
   display: grid;
   grid-column-gap: 1rem;
 }
 
-.c7 {
+.c8 {
   font-size: 1.75rem;
   line-height: 2rem;
   font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
@@ -30,7 +30,7 @@ exports[`CpsAssetPageMain MAP AV player should render version (live audio stream
   padding: 2rem 0;
 }
 
-.c13 {
+.c14 {
   font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
   font-weight: 400;
   font-style: italic;
@@ -38,7 +38,7 @@ exports[`CpsAssetPageMain MAP AV player should render version (live audio stream
   font-weight: inherit;
 }
 
-.c11 {
+.c12 {
   font-size: 0.875rem;
   line-height: 1.125rem;
   color: #6E6E73;
@@ -49,11 +49,11 @@ exports[`CpsAssetPageMain MAP AV player should render version (live audio stream
   padding-bottom: 0.25rem;
 }
 
-.c11:last-child {
+.c12:last-child {
   padding-bottom: 1rem;
 }
 
-.c12 {
+.c13 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
@@ -64,25 +64,25 @@ exports[`CpsAssetPageMain MAP AV player should render version (live audio stream
   margin: 0;
 }
 
-.c14 {
+.c15 {
   color: #222222;
   border-bottom: 1px solid #B80000;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c14:visited {
+.c15:visited {
   color: #6E6E73;
   border-bottom: 1px solid #6E6E73;
 }
 
-.c14:focus,
-.c14:hover {
+.c15:focus,
+.c15:hover {
   border-bottom: 2px solid #B80000;
   color: #B80000;
 }
 
-.c15 {
+.c16 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
@@ -92,7 +92,7 @@ exports[`CpsAssetPageMain MAP AV player should render version (live audio stream
   list-style-type: none;
 }
 
-.c15 > li::before {
+.c16 > li::before {
   content: ' ';
   display: inline-block;
   width: 2rem;
@@ -100,7 +100,7 @@ exports[`CpsAssetPageMain MAP AV player should render version (live audio stream
   margin-left: -2rem;
 }
 
-.c16 {
+.c17 {
   margin-bottom: 1rem;
 }
 
@@ -122,7 +122,7 @@ exports[`CpsAssetPageMain MAP AV player should render version (live audio stream
   margin: 0;
 }
 
-.c21 {
+.c22 {
   font-size: 0.75rem;
   line-height: 1rem;
   background-color: rgba(34,34,34,0.75);
@@ -136,7 +136,7 @@ exports[`CpsAssetPageMain MAP AV player should render version (live audio stream
   left: 0;
 }
 
-.c20 {
+.c21 {
   position: relative;
   height: 0;
   overflow: hidden;
@@ -163,22 +163,27 @@ exports[`CpsAssetPageMain MAP AV player should render version (live audio stream
   padding-bottom: 0;
 }
 
-.c8 {
+.c9 {
   padding: 2rem 0;
 }
 
-.c10 {
+.c11 {
   padding-bottom: 1rem;
 }
 
 .c5 {
+  left: 0;
+  overflow: hidden;
   position: absolute;
   top: 0;
-  left: 0;
   width: 100%;
   height: 100%;
+}
+
+.c6 {
   border: 0;
-  overflow: hidden;
+  height: 100%;
+  width: 100%;
 }
 
 @media (max-width:37.4375rem) {
@@ -222,209 +227,209 @@ exports[`CpsAssetPageMain MAP AV player should render version (live audio stream
 }
 
 @media (max-width:25rem) {
-  .c9 {
+  .c10 {
     padding: 0 0.5rem;
   }
 }
 
 @media (min-width:25rem) and (max-width:62.9375rem) {
-  .c9 {
+  .c10 {
     padding: 0 1rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c9 {
+  .c10 {
     grid-column: 1 / span 5;
     max-width: 83.33%;
   }
 }
 
 @media (min-width:63rem) and (max-width:80rem) {
-  .c9 {
+  .c10 {
     grid-column: 3 / span 5;
     max-width: 37.75rem;
   }
 }
 
 @media (min-width:80rem) {
-  .c9 {
+  .c10 {
     grid-column: 6 / span 10;
     max-width: 38.5rem;
   }
 }
 
 @supports (display:grid) {
-  .c9 {
+  .c10 {
     max-width: initial;
   }
 }
 
 @media (max-width:63rem) {
-  .c6 {
+  .c7 {
     grid-column: 1 / span 6;
   }
 }
 
 @media (min-width:63rem) and (max-width:80rem) {
-  .c6 {
+  .c7 {
     grid-column: 3 / span 6;
   }
 }
 
 @media (min-width:80rem) {
-  .c6 {
+  .c7 {
     grid-column: 6 / span 12;
   }
 }
 
 @media (max-width:25rem) {
-  .c6 {
+  .c7 {
     padding: 0 0.5rem;
   }
 }
 
 @media (min-width:25rem) and (max-width:62.9375rem) {
-  .c6 {
+  .c7 {
     padding: 0 1rem;
   }
 }
 
 @media (max-width:63rem) {
-  .c17 {
+  .c18 {
     grid-column: 1 / span 6;
   }
 }
 
 @media (min-width:63rem) and (max-width:80rem) {
-  .c17 {
+  .c18 {
     grid-column: 3 / span 6;
   }
 }
 
 @media (min-width:80rem) {
-  .c17 {
+  .c18 {
     grid-column: 6 / span 12;
   }
 }
 
 @media (max-width:37.4375rem) {
-  .c19 {
+  .c20 {
     grid-column: 1 / span 6;
   }
 }
 
 @media (min-width:37.5rem) and (max-width:62.9375rem) {
-  .c19 {
+  .c20 {
     grid-column: 1 / span 6;
   }
 }
 
 @media (min-width:63rem) and (max-width:80rem) {
-  .c19 {
+  .c20 {
     grid-column: 1 / span 6;
   }
 }
 
 @media (min-width:80rem) {
-  .c19 {
+  .c20 {
     grid-column: 1 / span 12;
   }
 }
 
 @media (max-width:37.4375rem) {
-  .c22 {
+  .c23 {
     grid-column: 1 / span 6;
   }
 }
 
 @media (min-width:37.5rem) and (max-width:62.9375rem) {
-  .c22 {
+  .c23 {
     grid-column: 1 / span 5;
   }
 }
 
 @media (min-width:63rem) and (max-width:80rem) {
-  .c22 {
+  .c23 {
     grid-column: 1 / span 5;
   }
 }
 
 @media (min-width:80rem) {
-  .c22 {
+  .c23 {
     grid-column: 1 / span 10;
   }
 }
 
 @media (max-width:80rem) {
-  .c18 {
+  .c19 {
     grid-template-columns: repeat(6,1fr);
   }
 }
 
 @media (min-width:80rem) {
-  .c18 {
+  .c19 {
     grid-template-columns: repeat(12,1fr);
   }
 }
 
 @media (min-width:20rem) and (max-width:37.4375rem) {
-  .c7 {
+  .c8 {
     font-size: 2rem;
     line-height: 2.25rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c7 {
+  .c8 {
     font-size: 2.75rem;
     line-height: 3rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c7 {
+  .c8 {
     padding: 2.5rem 0;
   }
 }
 
 @media (min-width:20rem) and (max-width:37.4375rem) {
-  .c11 {
+  .c12 {
     font-size: 0.875rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c11 {
+  .c12 {
     font-size: 0.8125rem;
     line-height: 1rem;
   }
 }
 
 @media (min-width:20rem) and (max-width:37.4375rem) {
-  .c12 {
+  .c13 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c12 {
+  .c13 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width:20rem) and (max-width:37.4375rem) {
-  .c15 {
+  .c16 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c15 {
+  .c16 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
@@ -468,13 +473,13 @@ exports[`CpsAssetPageMain MAP AV player should render version (live audio stream
 }
 
 @media (min-width:63rem) {
-  .c8 {
+  .c9 {
     padding: 2.5rem 0;
   }
 }
 
 @media (min-width:63rem) {
-  .c10 {
+  .c11 {
     padding-bottom: 1.5rem;
   }
 }
@@ -499,48 +504,52 @@ exports[`CpsAssetPageMain MAP AV player should render version (live audio stream
         <div
           class="c4"
         >
-          <iframe
-            allow="autoplay; fullscreen"
-            allowfullscreen=""
+          <div
             class="c5"
-            scrolling="no"
-            src="https://polling.test.bbc.co.uk/ws/av-embeds/cps/uzbek/sport-23248721/bbc_world_service_west_africa/uz-Cyrl"
-            title="Медиа плейер"
-          />
+          >
+            <iframe
+              allow="autoplay; fullscreen"
+              allowfullscreen=""
+              class="c6"
+              scrolling="no"
+              src="https://polling.test.bbc.co.uk/ws/av-embeds/cps/uzbek/sport-23248721/bbc_world_service_west_africa/uz-Cyrl"
+              title="Медиа плейер"
+            />
+          </div>
         </div>
       </figure>
     </div>
     <div
-      class="c6"
+      class="c7"
     >
       <strong
         aria-hidden="true"
-        class="c7 c8"
+        class="c8 c9"
       >
         Ўзбек деҳқонининг косаси нега оқармайдиshort
       </strong>
     </div>
     <div
-      class="c9 c10"
+      class="c10 c11"
     >
       <time
-        class="c11"
+        class="c12"
         datetime="2019-09-13"
       >
         13 сентябр 2019
       </time>
       <time
-        class="c11"
+        class="c12"
         datetime="2019-11-06"
       >
         Янгиланди 6 ноябр 2019
       </time>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c12"
+        class="c13"
       >
         <b>
           Ўзбек деҳқонининг косаси нега оқармайди
@@ -548,10 +557,10 @@ exports[`CpsAssetPageMain MAP AV player should render version (live audio stream
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c12"
+        class="c13"
       >
         <b>
           Ўзбек деҳқонининг косаси нега оқармайди
@@ -562,20 +571,20 @@ exports[`CpsAssetPageMain MAP AV player should render version (live audio stream
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c12"
+        class="c13"
       >
         <i
-          class="c13"
+          class="c14"
         >
           <b>
             Ўзбек деҳқонининг косаси нега оқармайди
           </b>
         </i>
         <i
-          class="c13"
+          class="c14"
         >
           <b>
              heading
@@ -584,10 +593,10 @@ exports[`CpsAssetPageMain MAP AV player should render version (live audio stream
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c12"
+        class="c13"
       >
         <b>
           Ўзбек деҳқонининг косаси нега оқармайди
@@ -598,14 +607,14 @@ exports[`CpsAssetPageMain MAP AV player should render version (live audio stream
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c12"
+        class="c13"
       >
         Шу йил апрел ойида Ўзбекистон Президенти Ислом 
         <a
-          class="c14"
+          class="c15"
           href="https://bbc.com/uzbek"
         >
           Каримов ўзининг
@@ -614,10 +623,10 @@ exports[`CpsAssetPageMain MAP AV player should render version (live audio stream
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c12"
+        class="c13"
       >
         Шу вақтгача ҳам ўзбекистонлик деҳқонлар ўз маҳсулотларини хорижга олиб 
         <b>
@@ -627,63 +636,63 @@ exports[`CpsAssetPageMain MAP AV player should render version (live audio stream
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c12"
+        class="c13"
       >
         Ўз мева-сабзавотини Россияга олиб чиқишда бу компания ёрдамига умид қилган боғбонларнинг гилослари бузила бошлагани ҳақидаги хабарлар ҳам тарқалди..
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c12"
+        class="c13"
       >
         Ҳозирда Ўзбекистонда айни пишиқчилик ва етиштирилган маҳсулот учун кенгроқ бозор топиш масаласи яна долзарб турар экан, мамлакат раҳбарининг сўзларидан сўнг вазият нақадар ўзгарган?
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c12"
+        class="c13"
       >
         Би-би-си билан суҳбатда иқтисодий таҳлилчи Анвар Ҳусаиновнинг айтишича, юқори минбардан айтилган сўзларга қарамай, қишлоқ хўжалиги маҳсулотларини хорижга, жумладан Россия бозорига олиб чиқишда ҳануз кўплаб муаммолар мавжуд.
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c12"
+        class="c13"
       >
         "Албатта ўтган йилларга қараганда маҳсулотлар экспорти анча кўпайган. Россиядан юк машиналари келиб, тўғридан-тўғри деҳқонлардан нақд пулга 
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <ul
-        class="c15"
+        class="c16"
         dir="ltr"
         role="list"
       >
         <li
-          class="c16"
+          class="c17"
           role="listitem"
         >
           Ўзбек деҳқонининг косаси нега оқармайди
         </li>
         <li
-          class="c16"
+          class="c17"
           role="listitem"
         >
           Ўзбек деҳқонининг косаси нега оқармайди
         </li>
         <li
-          class="c16"
+          class="c17"
           role="listitem"
         >
           <b>
@@ -691,7 +700,7 @@ exports[`CpsAssetPageMain MAP AV player should render version (live audio stream
           </b>
         </li>
         <li
-          class="c16"
+          class="c17"
           role="listitem"
         >
           Ўзбек деҳқонининг косаси нега оқармайди
@@ -699,52 +708,52 @@ exports[`CpsAssetPageMain MAP AV player should render version (live audio stream
       </ul>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <ul
-        class="c15"
+        class="c16"
         dir="ltr"
         role="list"
       >
         <li
-          class="c16"
+          class="c17"
           role="listitem"
         >
           <a
-            class="c14"
+            class="c15"
             href="https://bbc.com/uzbek"
           >
             Ўзбек деҳқонининг косаси нега оқармайди
           </a>
         </li>
         <li
-          class="c16"
+          class="c17"
           role="listitem"
         >
           <a
-            class="c14"
+            class="c15"
             href="https://bbc.com/uzbek"
           >
             Ўзбек деҳқонининг косаси нега оқармайди
           </a>
         </li>
         <li
-          class="c16"
+          class="c17"
           role="listitem"
         >
           <a
-            class="c14"
+            class="c15"
             href="https://bbc.com/uzbek"
           >
             Ўзбек деҳқонининг косаси нега оқармайди
           </a>
         </li>
         <li
-          class="c16"
+          class="c17"
           role="listitem"
         >
           <a
-            class="c14"
+            class="c15"
             href="https://bbc.com/uzbek"
           >
             Ўзбек деҳқонининг косаси нега оқармайди
@@ -753,26 +762,26 @@ exports[`CpsAssetPageMain MAP AV player should render version (live audio stream
       </ul>
     </div>
     <div
-      class="c17"
+      class="c18"
     >
       <figure
         class="c3"
       >
         <div
-          class="c18"
+          class="c19"
         >
           <div
-            class="c19"
+            class="c20"
           >
             <div
-              class="c20"
+              class="c21"
             >
               <div
                 class="lazyload-placeholder"
               />
               <noscript />
               <p
-                class="c21"
+                class="c22"
                 role="text"
               >
                 <span
@@ -789,25 +798,25 @@ exports[`CpsAssetPageMain MAP AV player should render version (live audio stream
             </div>
           </div>
           <div
-            class="c22"
+            class="c23"
           />
         </div>
       </figure>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c12"
+        class="c13"
       >
         Ўзбек деҳқонининг косаси нега оқармайди transmission info 
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c12"
+        class="c13"
       >
         Ўзбек деҳқонининг косаси нега оқармайди footer 
       </p>
@@ -825,16 +834,16 @@ exports[`CpsAssetPageMain MAP should render component 1`] = `
   padding-bottom: 2rem;
 }
 
-.c9 {
+.c10 {
   grid-column: 1 / span 6;
 }
 
-.c19 {
+.c20 {
   display: grid;
   grid-column-gap: 1rem;
 }
 
-.c7 {
+.c8 {
   font-size: 1.75rem;
   line-height: 2rem;
   font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
@@ -846,7 +855,7 @@ exports[`CpsAssetPageMain MAP should render component 1`] = `
   padding: 2rem 0;
 }
 
-.c13 {
+.c14 {
   font-size: 1.25rem;
   line-height: 1.5rem;
   font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
@@ -857,7 +866,7 @@ exports[`CpsAssetPageMain MAP should render component 1`] = `
   padding: 1.5rem 0;
 }
 
-.c17 {
+.c18 {
   font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
   font-weight: 400;
   font-style: italic;
@@ -865,7 +874,7 @@ exports[`CpsAssetPageMain MAP should render component 1`] = `
   font-weight: inherit;
 }
 
-.c11 {
+.c12 {
   font-size: 0.875rem;
   line-height: 1.125rem;
   color: #6E6E73;
@@ -876,11 +885,11 @@ exports[`CpsAssetPageMain MAP should render component 1`] = `
   padding-bottom: 0.25rem;
 }
 
-.c11:last-child {
+.c12:last-child {
   padding-bottom: 1rem;
 }
 
-.c12 {
+.c13 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
@@ -891,25 +900,25 @@ exports[`CpsAssetPageMain MAP should render component 1`] = `
   margin: 0;
 }
 
-.c16 {
+.c17 {
   color: #222222;
   border-bottom: 1px solid #B80000;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c16:visited {
+.c17:visited {
   color: #6E6E73;
   border-bottom: 1px solid #6E6E73;
 }
 
-.c16:focus,
-.c16:hover {
+.c17:focus,
+.c17:hover {
   border-bottom: 2px solid #B80000;
   color: #B80000;
 }
 
-.c14 {
+.c15 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
@@ -919,7 +928,7 @@ exports[`CpsAssetPageMain MAP should render component 1`] = `
   list-style-type: none;
 }
 
-.c14 > li::before {
+.c15 > li::before {
   content: ' ';
   display: inline-block;
   width: 2rem;
@@ -927,7 +936,7 @@ exports[`CpsAssetPageMain MAP should render component 1`] = `
   margin-left: -2rem;
 }
 
-.c15 {
+.c16 {
   margin-bottom: 1rem;
 }
 
@@ -949,7 +958,7 @@ exports[`CpsAssetPageMain MAP should render component 1`] = `
   margin: 0;
 }
 
-.c22 {
+.c23 {
   font-size: 0.75rem;
   line-height: 1rem;
   background-color: rgba(34,34,34,0.75);
@@ -963,7 +972,7 @@ exports[`CpsAssetPageMain MAP should render component 1`] = `
   left: 0;
 }
 
-.c24 {
+.c25 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
@@ -974,20 +983,20 @@ exports[`CpsAssetPageMain MAP should render component 1`] = `
   width: 100%;
 }
 
-.c24 > p {
+.c25 > p {
   padding-bottom: 1.5rem;
   margin: 0;
 }
 
-.c24 > p:last-child {
+.c25 > p:last-child {
   padding-bottom: 0;
 }
 
-.c24 i {
+.c25 i {
   font-style: normal;
 }
 
-.c21 {
+.c22 {
   position: relative;
   height: 0;
   overflow: hidden;
@@ -1014,22 +1023,27 @@ exports[`CpsAssetPageMain MAP should render component 1`] = `
   padding-bottom: 0;
 }
 
-.c8 {
+.c9 {
   padding: 2rem 0;
 }
 
-.c10 {
+.c11 {
   padding-bottom: 1rem;
 }
 
 .c5 {
+  left: 0;
+  overflow: hidden;
   position: absolute;
   top: 0;
-  left: 0;
   width: 100%;
   height: 100%;
+}
+
+.c6 {
   border: 0;
-  overflow: hidden;
+  height: 100%;
+  width: 100%;
 }
 
 @media (max-width:37.4375rem) {
@@ -1073,256 +1087,256 @@ exports[`CpsAssetPageMain MAP should render component 1`] = `
 }
 
 @media (max-width:25rem) {
-  .c9 {
+  .c10 {
     padding: 0 0.5rem;
   }
 }
 
 @media (min-width:25rem) and (max-width:62.9375rem) {
-  .c9 {
+  .c10 {
     padding: 0 1rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c9 {
+  .c10 {
     grid-column: 1 / span 5;
     max-width: 83.33%;
   }
 }
 
 @media (min-width:63rem) and (max-width:80rem) {
-  .c9 {
+  .c10 {
     grid-column: 3 / span 5;
     max-width: 37.75rem;
   }
 }
 
 @media (min-width:80rem) {
-  .c9 {
+  .c10 {
     grid-column: 6 / span 10;
     max-width: 38.5rem;
   }
 }
 
 @supports (display:grid) {
-  .c9 {
+  .c10 {
     max-width: initial;
   }
 }
 
 @media (max-width:63rem) {
-  .c6 {
+  .c7 {
     grid-column: 1 / span 6;
   }
 }
 
 @media (min-width:63rem) and (max-width:80rem) {
-  .c6 {
+  .c7 {
     grid-column: 3 / span 6;
   }
 }
 
 @media (min-width:80rem) {
-  .c6 {
+  .c7 {
     grid-column: 6 / span 12;
   }
 }
 
 @media (max-width:25rem) {
-  .c6 {
+  .c7 {
     padding: 0 0.5rem;
   }
 }
 
 @media (min-width:25rem) and (max-width:62.9375rem) {
-  .c6 {
+  .c7 {
     padding: 0 1rem;
   }
 }
 
 @media (max-width:63rem) {
-  .c18 {
+  .c19 {
     grid-column: 1 / span 6;
   }
 }
 
 @media (min-width:63rem) and (max-width:80rem) {
-  .c18 {
+  .c19 {
     grid-column: 3 / span 6;
   }
 }
 
 @media (min-width:80rem) {
-  .c18 {
+  .c19 {
     grid-column: 6 / span 12;
   }
 }
 
 @media (max-width:37.4375rem) {
-  .c20 {
+  .c21 {
     grid-column: 1 / span 6;
   }
 }
 
 @media (min-width:37.5rem) and (max-width:62.9375rem) {
-  .c20 {
+  .c21 {
     grid-column: 1 / span 6;
   }
 }
 
 @media (min-width:63rem) and (max-width:80rem) {
-  .c20 {
+  .c21 {
     grid-column: 1 / span 6;
   }
 }
 
 @media (min-width:80rem) {
-  .c20 {
+  .c21 {
     grid-column: 1 / span 12;
   }
 }
 
 @media (max-width:37.4375rem) {
-  .c23 {
+  .c24 {
     grid-column: 1 / span 6;
   }
 }
 
 @media (min-width:37.5rem) and (max-width:62.9375rem) {
-  .c23 {
+  .c24 {
     grid-column: 1 / span 5;
   }
 }
 
 @media (min-width:63rem) and (max-width:80rem) {
-  .c23 {
+  .c24 {
     grid-column: 1 / span 5;
   }
 }
 
 @media (min-width:80rem) {
-  .c23 {
+  .c24 {
     grid-column: 1 / span 10;
   }
 }
 
 @media (max-width:80rem) {
-  .c19 {
+  .c20 {
     grid-template-columns: repeat(6,1fr);
   }
 }
 
 @media (min-width:80rem) {
-  .c19 {
+  .c20 {
     grid-template-columns: repeat(12,1fr);
   }
 }
 
 @media (min-width:20rem) and (max-width:37.4375rem) {
-  .c7 {
+  .c8 {
     font-size: 2rem;
     line-height: 2.25rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c7 {
+  .c8 {
     font-size: 2.75rem;
     line-height: 3rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c7 {
+  .c8 {
     padding: 2.5rem 0;
   }
 }
 
 @media (min-width:20rem) and (max-width:37.4375rem) {
-  .c13 {
+  .c14 {
     font-size: 1.5rem;
     line-height: 1.75rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c13 {
+  .c14 {
     font-size: 2rem;
     line-height: 2.25rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c13 {
+  .c14 {
     padding-top: 2rem;
   }
 }
 
 @media (min-width:20rem) and (max-width:37.4375rem) {
-  .c11 {
+  .c12 {
     font-size: 0.875rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c11 {
+  .c12 {
     font-size: 0.8125rem;
     line-height: 1rem;
   }
 }
 
 @media (min-width:20rem) and (max-width:37.4375rem) {
-  .c12 {
+  .c13 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c12 {
+  .c13 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width:20rem) and (max-width:37.4375rem) {
-  .c14 {
+  .c15 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c14 {
+  .c15 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width:20rem) and (max-width:37.4375rem) {
-  .c24 {
+  .c25 {
     font-size: 0.9375rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c24 {
+  .c25 {
     font-size: 0.875rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width:25rem) and (max-width:62.9375rem) {
-  .c24 {
+  .c25 {
     padding: 0.5rem 1rem 0;
   }
 }
 
 @media (min-width:63rem) {
-  .c24 {
+  .c25 {
     padding: 0.5rem 0 0;
   }
 }
@@ -1365,13 +1379,13 @@ exports[`CpsAssetPageMain MAP should render component 1`] = `
 }
 
 @media (min-width:63rem) {
-  .c8 {
+  .c9 {
     padding: 2.5rem 0;
   }
 }
 
 @media (min-width:63rem) {
-  .c10 {
+  .c11 {
     padding-bottom: 1.5rem;
   }
 }
@@ -1396,48 +1410,52 @@ exports[`CpsAssetPageMain MAP should render component 1`] = `
         <div
           class="c4"
         >
-          <iframe
-            allow="autoplay; fullscreen"
-            allowfullscreen=""
+          <div
             class="c5"
-            scrolling="no"
-            src="https://polling.test.bbc.co.uk/ws/av-embeds/cps/pidgin/23248703/p01kx42v/pcm"
-            title="Media player"
-          />
+          >
+            <iframe
+              allow="autoplay; fullscreen"
+              allowfullscreen=""
+              class="c6"
+              scrolling="no"
+              src="https://polling.test.bbc.co.uk/ws/av-embeds/cps/pidgin/23248703/p01kx42v/pcm"
+              title="Media player"
+            />
+          </div>
         </div>
       </figure>
     </div>
     <div
-      class="c6"
+      class="c7"
     >
       <strong
         aria-hidden="true"
-        class="c7 c8"
+        class="c8 c9"
       >
         Simorgh: Media Pod Build First CPS Media Asset Page in Simorgh with the Help of Drew & &lt; &gt;
       </strong>
     </div>
     <div
-      class="c9 c10"
+      class="c10 c11"
     >
       <time
-        class="c11"
+        class="c12"
         datetime="2019-09-13"
       >
         13 September 2019
       </time>
       <time
-        class="c11"
+        class="c12"
         datetime="2019-11-20"
       >
         New Informate 20 November 2019
       </time>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c12"
+        class="c13"
       >
         <b>
           This is an introduction in bold. & &lt; &gt;
@@ -1445,10 +1463,10 @@ exports[`CpsAssetPageMain MAP should render component 1`] = `
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <h2
-        class="c13"
+        class="c14"
         id="This-is-a-heading-<->"
         tabindex="-1"
       >
@@ -1456,10 +1474,10 @@ exports[`CpsAssetPageMain MAP should render component 1`] = `
       </h2>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <h2
-        class="c13"
+        class="c14"
         id="This-is-a-subheading-<->"
         tabindex="-1"
       >
@@ -1467,10 +1485,10 @@ exports[`CpsAssetPageMain MAP should render component 1`] = `
       </h2>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <h2
-        class="c13"
+        class="c14"
         id="This-is-a-crosshead-<->"
         tabindex="-1"
       >
@@ -1478,92 +1496,92 @@ exports[`CpsAssetPageMain MAP should render component 1`] = `
       </h2>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c12"
+        class="c13"
       >
         This is regular paragraph text. "Lorem ipsum dolor sit amet", consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c12"
+        class="c13"
       >
         Bulleted list:
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <ul
-        class="c14"
+        class="c15"
         dir="ltr"
         role="list"
       >
         <li
-          class="c15"
+          class="c16"
           role="listitem"
         >
           <a
-            class="c16"
+            class="c17"
             href="http://www.bbc.com/afrique/23248423"
           >
             &lt;Media Asset Page&gt;
           </a>
         </li>
         <li
-          class="c15"
+          class="c16"
           role="listitem"
         >
           <a
-            class="c16"
+            class="c17"
             href="http://www.bbc.com/afrique/23248423"
           >
             &lt;Media Asset Page&gt;
           </a>
         </li>
         <li
-          class="c15"
+          class="c16"
           role="listitem"
         >
           <a
-            class="c16"
+            class="c17"
             href="http://www.bbc.com/afrique/23248423"
           >
             &lt;Media Asset Page&gt;
           </a>
         </li>
         <li
-          class="c15"
+          class="c16"
           role="listitem"
         >
           <a
-            class="c16"
+            class="c17"
             href="https://bbc.com/pidgin"
           >
             this is the link text
           </a>
         </li>
         <li
-          class="c15"
+          class="c16"
           role="listitem"
         >
           <a
-            class="c16"
+            class="c17"
             href="https://bbc.com/pidgin"
           >
             this is the link text
           </a>
         </li>
         <li
-          class="c15"
+          class="c16"
           role="listitem"
         >
           <a
-            class="c16"
+            class="c17"
             href="https://bbc.com/pidgin"
           >
             this is the link text
@@ -1572,83 +1590,83 @@ exports[`CpsAssetPageMain MAP should render component 1`] = `
       </ul>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c12"
+        class="c13"
       >
         Numbered list:
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <ul
-        class="c14"
+        class="c15"
         dir="ltr"
         role="list"
       >
         <li
-          class="c15"
+          class="c16"
           role="listitem"
         >
           <a
-            class="c16"
+            class="c17"
             href="http://www.bbc.com/afrique/23248423"
           >
             &lt;Media Asset Page&gt;
           </a>
         </li>
         <li
-          class="c15"
+          class="c16"
           role="listitem"
         >
           <a
-            class="c16"
+            class="c17"
             href="http://www.bbc.com/afrique/23248423"
           >
             &lt;Media Asset Page&gt;
           </a>
         </li>
         <li
-          class="c15"
+          class="c16"
           role="listitem"
         >
           <a
-            class="c16"
+            class="c17"
             href="http://www.bbc.com/afrique/23248423"
           >
             &lt;Media Asset Page&gt;
           </a>
         </li>
         <li
-          class="c15"
+          class="c16"
           role="listitem"
         >
           <a
-            class="c16"
+            class="c17"
             href="https://bbc.com/pidgin"
           >
             this is the link text
           </a>
         </li>
         <li
-          class="c15"
+          class="c16"
           role="listitem"
         >
           <a
-            class="c16"
+            class="c17"
             href="https://bbc.com/pidgin"
           >
             this is the link text
           </a>
         </li>
         <li
-          class="c15"
+          class="c16"
           role="listitem"
         >
           <a
-            class="c16"
+            class="c17"
             href="https://bbc.com/pidgin"
           >
             this is the link text
@@ -1657,10 +1675,10 @@ exports[`CpsAssetPageMain MAP should render component 1`] = `
       </ul>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c12"
+        class="c13"
       >
         Lorem ipsum dolor sit amet, 
         <b>
@@ -1672,13 +1690,13 @@ exports[`CpsAssetPageMain MAP should render component 1`] = `
         </b>
         ex ea commodo consequat. Duis aute irure dolor in reprehenderit
         <i
-          class="c17"
+          class="c18"
         >
            in voluptate velit esse cillum 
         </i>
         dolore "eu fugiat nulla" pariatur. 
         <a
-          class="c16"
+          class="c17"
           href="https://bbc.com/pidgin"
         >
           Excepteur
@@ -1687,86 +1705,86 @@ exports[`CpsAssetPageMain MAP should render component 1`] = `
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c12"
+        class="c13"
       >
         Testing special characters: !"£$%^&*()_+=-{}[]:@~;'#&lt;&gt;?,./\\\`\\# 7.7 E 2₉₈₇₆₅₄₃₂₁₀⁹⁸⁷⁶⁵⁴³²¹⁰ⁿ☆★ŷŶŵŴÿþýüûúùø÷öõôóòñðïîíìëêéèçæåäãâáßÞÝÜÛÚÙØ×ÖÕÔÓÒÑÐÏÎÍÌËÊÉÈ
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c12"
+        class="c13"
       >
         ÇÆÆÅÄÃÂÁÀ¿¾½¼»º¸·¶µ´±°¯®¬«ª©¨§¦¥¤£¢¡ ~#
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c12"
+        class="c13"
       >
         Table:
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c12"
+        class="c13"
       >
         Social media embed:
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c12"
+        class="c13"
       >
         Quote box:
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c12"
+        class="c13"
       >
         Correspondent quote box:
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c12"
+        class="c13"
       >
         Fact box:
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c12"
+        class="c13"
       >
         ­
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c12"
+        class="c13"
       >
         Lorem ipsum
         <a
-          class="c16"
+          class="c17"
           href="https://bbc.com/pidgin"
         >
            dolor sit amet
@@ -1775,26 +1793,26 @@ exports[`CpsAssetPageMain MAP should render component 1`] = `
       </p>
     </div>
     <div
-      class="c18"
+      class="c19"
     >
       <figure
         class="c3"
       >
         <div
-          class="c19"
+          class="c20"
         >
           <div
-            class="c20"
+            class="c21"
           >
             <div
-              class="c21"
+              class="c22"
             >
               <div
                 class="lazyload-placeholder"
               />
               <noscript />
               <p
-                class="c22"
+                class="c23"
                 role="text"
               >
                 <span
@@ -1811,10 +1829,10 @@ exports[`CpsAssetPageMain MAP should render component 1`] = `
             </div>
           </div>
           <div
-            class="c23"
+            class="c24"
           >
             <figcaption
-              class="c24"
+              class="c25"
             >
               <span
                 class="c1"
@@ -1830,26 +1848,26 @@ exports[`CpsAssetPageMain MAP should render component 1`] = `
       </figure>
     </div>
     <div
-      class="c18"
+      class="c19"
     >
       <figure
         class="c3"
       >
         <div
-          class="c19"
+          class="c20"
         >
           <div
-            class="c20"
+            class="c21"
           >
             <div
-              class="c21"
+              class="c22"
             >
               <div
                 class="lazyload-placeholder"
               />
               <noscript />
               <p
-                class="c22"
+                class="c23"
                 role="text"
               >
                 <span
@@ -1866,10 +1884,10 @@ exports[`CpsAssetPageMain MAP should render component 1`] = `
             </div>
           </div>
           <div
-            class="c23"
+            class="c24"
           >
             <figcaption
-              class="c24"
+              class="c25"
             >
               <span
                 class="c1"
@@ -1885,33 +1903,33 @@ exports[`CpsAssetPageMain MAP should render component 1`] = `
       </figure>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <ul
-        class="c14"
+        class="c15"
         dir="ltr"
         role="list"
       >
         <li
-          class="c15"
+          class="c16"
           role="listitem"
         >
           sunt in culpa qui officia deserunt mollit anim id est laborum
         </li>
         <li
-          class="c15"
+          class="c16"
           role="listitem"
         >
           sunt in culpa qui officia deserunt mollit anim id est laborum
         </li>
         <li
-          class="c15"
+          class="c16"
           role="listitem"
         >
           sunt in culpa qui officia deserunt mollit anim id est laborum
         </li>
         <li
-          class="c15"
+          class="c16"
           role="listitem"
         >
           v3 draft
@@ -1919,19 +1937,19 @@ exports[`CpsAssetPageMain MAP should render component 1`] = `
       </ul>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c12"
+        class="c13"
       >
         This is transmission info 
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c12"
+        class="c13"
       >
         This is the footer 
       </p>
@@ -3849,7 +3867,7 @@ exports[`CpsAssetPageMain should match snapshot for STY 1`] = `
   grid-column-gap: 1rem;
 }
 
-.c24 {
+.c25 {
   font-size: 1.25rem;
   line-height: 1.5rem;
   font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
@@ -4043,7 +4061,7 @@ exports[`CpsAssetPageMain should match snapshot for STY 1`] = `
   padding-bottom: 0;
 }
 
-.c29 {
+.c30 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4053,7 +4071,7 @@ exports[`CpsAssetPageMain should match snapshot for STY 1`] = `
   flex-direction: column;
 }
 
-.c30 {
+.c31 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -4072,7 +4090,7 @@ exports[`CpsAssetPageMain should match snapshot for STY 1`] = `
   align-items: baseline;
 }
 
-.c31 {
+.c32 {
   font-size: 1.125rem;
   line-height: 1.375rem;
   font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
@@ -4092,42 +4110,42 @@ exports[`CpsAssetPageMain should match snapshot for STY 1`] = `
   align-items: center;
 }
 
-.c27 {
+.c28 {
   border-top: 0.0625rem solid #AEAEB5;
   z-index: -1;
 }
 
-.c26 {
+.c27 {
   position: relative;
   margin-top: 2rem;
 }
 
-.c28 {
+.c29 {
   margin: 0;
   padding: 0;
 }
 
-.c33 {
+.c34 {
   border-bottom: 0.0625rem solid #F2F2F2;
   padding: 0.5rem 0 1rem;
 }
 
-.c33:first-child {
+.c34:first-child {
   padding-top: 0;
 }
 
-.c33:last-child {
+.c34:last-child {
   padding-bottom: 0;
   border: none;
 }
 
-.c32 {
+.c33 {
   list-style-type: none;
   margin: 0;
   padding: 0;
 }
 
-.c25 {
+.c26 {
   margin-bottom: 1rem;
   z-index: 0;
 }
@@ -4137,13 +4155,18 @@ exports[`CpsAssetPageMain should match snapshot for STY 1`] = `
 }
 
 .c23 {
+  left: 0;
+  overflow: hidden;
   position: absolute;
   top: 0;
-  left: 0;
   width: 100%;
   height: 100%;
+}
+
+.c24 {
   border: 0;
-  overflow: hidden;
+  height: 100%;
+  width: 100%;
 }
 
 @media (max-width:37.4375rem) {
@@ -4334,21 +4357,21 @@ exports[`CpsAssetPageMain should match snapshot for STY 1`] = `
 }
 
 @media (min-width:20rem) and (max-width:37.4375rem) {
-  .c24 {
+  .c25 {
     font-size: 1.5rem;
     line-height: 1.75rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c24 {
+  .c25 {
     font-size: 2rem;
     line-height: 2.25rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c24 {
+  .c25 {
     padding-top: 2rem;
   }
 }
@@ -4479,7 +4502,7 @@ exports[`CpsAssetPageMain should match snapshot for STY 1`] = `
 }
 
 @media (min-width:37.5rem) {
-  .c30 {
+  .c31 {
     -webkit-align-items: stretch;
     -webkit-box-align: stretch;
     -ms-flex-align: stretch;
@@ -4488,39 +4511,39 @@ exports[`CpsAssetPageMain should match snapshot for STY 1`] = `
 }
 
 @media (min-width:20rem) and (max-width:37.4375rem) {
-  .c31 {
+  .c32 {
     font-size: 1.25rem;
     line-height: 1.5rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c31 {
+  .c32 {
     font-size: 1.5rem;
     line-height: 1.75rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c31 {
+  .c32 {
     margin: 0;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c31 {
+  .c32 {
     padding-right: 1rem;
   }
 }
 
 @media screen and (-ms-high-contrast:active) {
-  .c27 {
+  .c28 {
     border-color: windowText;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c27 {
+  .c28 {
     position: absolute;
     left: 0;
     right: 0;
@@ -4529,67 +4552,67 @@ exports[`CpsAssetPageMain should match snapshot for STY 1`] = `
 }
 
 @media (min-width:37.5rem) {
-  .c26 {
+  .c27 {
     margin-top: 1.5rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c33 {
+  .c34 {
     padding: 1rem 0 1rem;
   }
 }
 
 @media (min-width:63rem) {
-  .c33 {
+  .c34 {
     padding: 1.5rem 0 1.5rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c33:first-child {
+  .c34:first-child {
     padding-top: 1rem;
   }
 }
 
 @media (min-width:63rem) {
-  .c33:first-child {
+  .c34:first-child {
     padding-top: 1.5rem;
   }
 }
 
 @media (max-width:63rem) {
-  .c25 {
+  .c26 {
     grid-column: 1 / span 6;
   }
 }
 
 @media (min-width:63rem) and (max-width:80rem) {
-  .c25 {
+  .c26 {
     grid-column: 3 / span 6;
   }
 }
 
 @media (min-width:80rem) {
-  .c25 {
+  .c26 {
     grid-column: 6 / span 12;
   }
 }
 
 @media (max-width:25rem) {
-  .c25 {
+  .c26 {
     padding: 0 0.5rem;
   }
 }
 
 @media (min-width:25rem) and (max-width:62.9375rem) {
-  .c25 {
+  .c26 {
     padding: 0 1rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c25 {
+  .c26 {
     margin-bottom: 1.5rem;
   }
 }
@@ -5164,14 +5187,18 @@ exports[`CpsAssetPageMain should match snapshot for STY 1`] = `
             <div
               class="c22"
             >
-              <iframe
-                allow="autoplay; fullscreen"
-                allowfullscreen=""
+              <div
                 class="c23"
-                scrolling="no"
-                src="https://polling.test.bbc.co.uk/ws/av-embeds/cps/igbo/afirika-23252735/p01mr6r9/ig"
-                title="Media player"
-              />
+              >
+                <iframe
+                  allow="autoplay; fullscreen"
+                  allowfullscreen=""
+                  class="c24"
+                  scrolling="no"
+                  src="https://polling.test.bbc.co.uk/ws/av-embeds/cps/igbo/afirika-23252735/p01mr6r9/ig"
+                  title="Media player"
+                />
+              </div>
             </div>
           </figure>
         </div>
@@ -5179,7 +5206,7 @@ exports[`CpsAssetPageMain should match snapshot for STY 1`] = `
           class="c13"
         >
           <h2
-            class="c24"
+            class="c25"
             id="This-is-a-heading"
             tabindex="-1"
           >
@@ -5190,7 +5217,7 @@ exports[`CpsAssetPageMain should match snapshot for STY 1`] = `
           class="c13"
         >
           <h2
-            class="c24"
+            class="c25"
             id="This-is-a-subheading"
             tabindex="-1"
           >
@@ -5210,7 +5237,7 @@ exports[`CpsAssetPageMain should match snapshot for STY 1`] = `
           class="c13"
         >
           <h2
-            class="c24"
+            class="c25"
             id="This-is-a-crosshead"
             tabindex="-1"
           >
@@ -5257,25 +5284,25 @@ exports[`CpsAssetPageMain should match snapshot for STY 1`] = `
         role="complementary"
       >
         <div
-          class="c25"
+          class="c26"
         >
           <div
-            class="c26"
+            class="c27"
           >
             <div
-              class="c27"
+              class="c28"
             />
             <h2
-              class="c28"
+              class="c29"
             >
               <div
-                class="c29"
+                class="c30"
               >
                 <span
-                  class="c30"
+                  class="c31"
                 >
                   <span
-                    class="c31"
+                    class="c32"
                     dir="ltr"
                     id="related-content-heading"
                   >
@@ -5286,11 +5313,11 @@ exports[`CpsAssetPageMain should match snapshot for STY 1`] = `
             </h2>
           </div>
           <ul
-            class="c32"
+            class="c33"
             role="list"
           >
             <li
-              class="c33"
+              class="c34"
               role="listitem"
             />
           </ul>
@@ -5310,16 +5337,16 @@ exports[`CpsAssetPageMain should not show the pop-out timestamp when allowDateSt
   padding-bottom: 2rem;
 }
 
-.c9 {
+.c10 {
   grid-column: 1 / span 6;
 }
 
-.c17 {
+.c18 {
   display: grid;
   grid-column-gap: 1rem;
 }
 
-.c7 {
+.c8 {
   font-size: 1.75rem;
   line-height: 2rem;
   font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
@@ -5331,7 +5358,7 @@ exports[`CpsAssetPageMain should not show the pop-out timestamp when allowDateSt
   padding: 2rem 0;
 }
 
-.c11 {
+.c12 {
   font-size: 1.25rem;
   line-height: 1.5rem;
   font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
@@ -5342,7 +5369,7 @@ exports[`CpsAssetPageMain should not show the pop-out timestamp when allowDateSt
   padding: 1.5rem 0;
 }
 
-.c15 {
+.c16 {
   font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
   font-weight: 400;
   font-style: italic;
@@ -5350,7 +5377,7 @@ exports[`CpsAssetPageMain should not show the pop-out timestamp when allowDateSt
   font-weight: inherit;
 }
 
-.c10 {
+.c11 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
@@ -5361,25 +5388,25 @@ exports[`CpsAssetPageMain should not show the pop-out timestamp when allowDateSt
   margin: 0;
 }
 
-.c14 {
+.c15 {
   color: #222222;
   border-bottom: 1px solid #B80000;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
 
-.c14:visited {
+.c15:visited {
   color: #6E6E73;
   border-bottom: 1px solid #6E6E73;
 }
 
-.c14:focus,
-.c14:hover {
+.c15:focus,
+.c15:hover {
   border-bottom: 2px solid #B80000;
   color: #B80000;
 }
 
-.c12 {
+.c13 {
   font-size: 0.9375rem;
   line-height: 1.25rem;
   font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
@@ -5389,7 +5416,7 @@ exports[`CpsAssetPageMain should not show the pop-out timestamp when allowDateSt
   list-style-type: none;
 }
 
-.c12 > li::before {
+.c13 > li::before {
   content: ' ';
   display: inline-block;
   width: 2rem;
@@ -5397,7 +5424,7 @@ exports[`CpsAssetPageMain should not show the pop-out timestamp when allowDateSt
   margin-left: -2rem;
 }
 
-.c13 {
+.c14 {
   margin-bottom: 1rem;
 }
 
@@ -5419,7 +5446,7 @@ exports[`CpsAssetPageMain should not show the pop-out timestamp when allowDateSt
   margin: 0;
 }
 
-.c20 {
+.c21 {
   font-size: 0.75rem;
   line-height: 1rem;
   background-color: rgba(34,34,34,0.75);
@@ -5433,7 +5460,7 @@ exports[`CpsAssetPageMain should not show the pop-out timestamp when allowDateSt
   left: 0;
 }
 
-.c22 {
+.c23 {
   font-size: 0.9375rem;
   line-height: 1.125rem;
   font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
@@ -5444,20 +5471,20 @@ exports[`CpsAssetPageMain should not show the pop-out timestamp when allowDateSt
   width: 100%;
 }
 
-.c22 > p {
+.c23 > p {
   padding-bottom: 1.5rem;
   margin: 0;
 }
 
-.c22 > p:last-child {
+.c23 > p:last-child {
   padding-bottom: 0;
 }
 
-.c22 i {
+.c23 i {
   font-style: normal;
 }
 
-.c19 {
+.c20 {
   position: relative;
   height: 0;
   overflow: hidden;
@@ -5484,18 +5511,23 @@ exports[`CpsAssetPageMain should not show the pop-out timestamp when allowDateSt
   padding-bottom: 0;
 }
 
-.c8 {
+.c9 {
   padding: 2rem 0;
 }
 
 .c5 {
+  left: 0;
+  overflow: hidden;
   position: absolute;
   top: 0;
-  left: 0;
   width: 100%;
   height: 100%;
+}
+
+.c6 {
   border: 0;
-  overflow: hidden;
+  height: 100%;
+  width: 100%;
 }
 
 @media (max-width:37.4375rem) {
@@ -5539,242 +5571,242 @@ exports[`CpsAssetPageMain should not show the pop-out timestamp when allowDateSt
 }
 
 @media (max-width:25rem) {
-  .c9 {
+  .c10 {
     padding: 0 0.5rem;
   }
 }
 
 @media (min-width:25rem) and (max-width:62.9375rem) {
-  .c9 {
+  .c10 {
     padding: 0 1rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c9 {
+  .c10 {
     grid-column: 1 / span 5;
     max-width: 83.33%;
   }
 }
 
 @media (min-width:63rem) and (max-width:80rem) {
-  .c9 {
+  .c10 {
     grid-column: 3 / span 5;
     max-width: 37.75rem;
   }
 }
 
 @media (min-width:80rem) {
-  .c9 {
+  .c10 {
     grid-column: 6 / span 10;
     max-width: 38.5rem;
   }
 }
 
 @supports (display:grid) {
-  .c9 {
+  .c10 {
     max-width: initial;
   }
 }
 
 @media (max-width:63rem) {
-  .c6 {
+  .c7 {
     grid-column: 1 / span 6;
   }
 }
 
 @media (min-width:63rem) and (max-width:80rem) {
-  .c6 {
+  .c7 {
     grid-column: 3 / span 6;
   }
 }
 
 @media (min-width:80rem) {
-  .c6 {
+  .c7 {
     grid-column: 6 / span 12;
   }
 }
 
 @media (max-width:25rem) {
-  .c6 {
+  .c7 {
     padding: 0 0.5rem;
   }
 }
 
 @media (min-width:25rem) and (max-width:62.9375rem) {
-  .c6 {
+  .c7 {
     padding: 0 1rem;
   }
 }
 
 @media (max-width:63rem) {
-  .c16 {
+  .c17 {
     grid-column: 1 / span 6;
   }
 }
 
 @media (min-width:63rem) and (max-width:80rem) {
-  .c16 {
+  .c17 {
     grid-column: 3 / span 6;
   }
 }
 
 @media (min-width:80rem) {
-  .c16 {
+  .c17 {
     grid-column: 6 / span 12;
   }
 }
 
 @media (max-width:37.4375rem) {
-  .c18 {
+  .c19 {
     grid-column: 1 / span 6;
   }
 }
 
 @media (min-width:37.5rem) and (max-width:62.9375rem) {
-  .c18 {
+  .c19 {
     grid-column: 1 / span 6;
   }
 }
 
 @media (min-width:63rem) and (max-width:80rem) {
-  .c18 {
+  .c19 {
     grid-column: 1 / span 6;
   }
 }
 
 @media (min-width:80rem) {
-  .c18 {
+  .c19 {
     grid-column: 1 / span 12;
   }
 }
 
 @media (max-width:37.4375rem) {
-  .c21 {
+  .c22 {
     grid-column: 1 / span 6;
   }
 }
 
 @media (min-width:37.5rem) and (max-width:62.9375rem) {
-  .c21 {
+  .c22 {
     grid-column: 1 / span 5;
   }
 }
 
 @media (min-width:63rem) and (max-width:80rem) {
-  .c21 {
+  .c22 {
     grid-column: 1 / span 5;
   }
 }
 
 @media (min-width:80rem) {
-  .c21 {
+  .c22 {
     grid-column: 1 / span 10;
   }
 }
 
 @media (max-width:80rem) {
-  .c17 {
+  .c18 {
     grid-template-columns: repeat(6,1fr);
   }
 }
 
 @media (min-width:80rem) {
-  .c17 {
+  .c18 {
     grid-template-columns: repeat(12,1fr);
   }
 }
 
 @media (min-width:20rem) and (max-width:37.4375rem) {
-  .c7 {
+  .c8 {
     font-size: 2rem;
     line-height: 2.25rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c7 {
+  .c8 {
     font-size: 2.75rem;
     line-height: 3rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c7 {
+  .c8 {
     padding: 2.5rem 0;
   }
 }
 
 @media (min-width:20rem) and (max-width:37.4375rem) {
-  .c11 {
+  .c12 {
     font-size: 1.5rem;
     line-height: 1.75rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c11 {
+  .c12 {
     font-size: 2rem;
     line-height: 2.25rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c11 {
+  .c12 {
     padding-top: 2rem;
   }
 }
 
 @media (min-width:20rem) and (max-width:37.4375rem) {
-  .c10 {
+  .c11 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c10 {
+  .c11 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width:20rem) and (max-width:37.4375rem) {
-  .c12 {
+  .c13 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c12 {
+  .c13 {
     font-size: 1rem;
     line-height: 1.375rem;
   }
 }
 
 @media (min-width:20rem) and (max-width:37.4375rem) {
-  .c22 {
+  .c23 {
     font-size: 0.9375rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width:37.5rem) {
-  .c22 {
+  .c23 {
     font-size: 0.875rem;
     line-height: 1.125rem;
   }
 }
 
 @media (min-width:25rem) and (max-width:62.9375rem) {
-  .c22 {
+  .c23 {
     padding: 0.5rem 1rem 0;
   }
 }
 
 @media (min-width:63rem) {
-  .c22 {
+  .c23 {
     padding: 0.5rem 0 0;
   }
 }
@@ -5817,7 +5849,7 @@ exports[`CpsAssetPageMain should not show the pop-out timestamp when allowDateSt
 }
 
 @media (min-width:63rem) {
-  .c8 {
+  .c9 {
     padding: 2.5rem 0;
   }
 }
@@ -5842,32 +5874,36 @@ exports[`CpsAssetPageMain should not show the pop-out timestamp when allowDateSt
         <div
           class="c4"
         >
-          <iframe
-            allow="autoplay; fullscreen"
-            allowfullscreen=""
+          <div
             class="c5"
-            scrolling="no"
-            src="https://polling.test.bbc.co.uk/ws/av-embeds/cps/pidgin/23248703/p01kx42v/pcm"
-            title="Media player"
-          />
+          >
+            <iframe
+              allow="autoplay; fullscreen"
+              allowfullscreen=""
+              class="c6"
+              scrolling="no"
+              src="https://polling.test.bbc.co.uk/ws/av-embeds/cps/pidgin/23248703/p01kx42v/pcm"
+              title="Media player"
+            />
+          </div>
         </div>
       </figure>
     </div>
     <div
-      class="c6"
+      class="c7"
     >
       <strong
         aria-hidden="true"
-        class="c7 c8"
+        class="c8 c9"
       >
         Simorgh: Media Pod Build First CPS Media Asset Page in Simorgh with the Help of Drew & &lt; &gt;
       </strong>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c10"
+        class="c11"
       >
         <b>
           This is an introduction in bold. & &lt; &gt;
@@ -5875,10 +5911,10 @@ exports[`CpsAssetPageMain should not show the pop-out timestamp when allowDateSt
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <h2
-        class="c11"
+        class="c12"
         id="This-is-a-heading-<->"
         tabindex="-1"
       >
@@ -5886,10 +5922,10 @@ exports[`CpsAssetPageMain should not show the pop-out timestamp when allowDateSt
       </h2>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <h2
-        class="c11"
+        class="c12"
         id="This-is-a-subheading-<->"
         tabindex="-1"
       >
@@ -5897,10 +5933,10 @@ exports[`CpsAssetPageMain should not show the pop-out timestamp when allowDateSt
       </h2>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <h2
-        class="c11"
+        class="c12"
         id="This-is-a-crosshead-<->"
         tabindex="-1"
       >
@@ -5908,92 +5944,92 @@ exports[`CpsAssetPageMain should not show the pop-out timestamp when allowDateSt
       </h2>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c10"
+        class="c11"
       >
         This is regular paragraph text. "Lorem ipsum dolor sit amet", consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c10"
+        class="c11"
       >
         Bulleted list:
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <ul
-        class="c12"
+        class="c13"
         dir="ltr"
         role="list"
       >
         <li
-          class="c13"
+          class="c14"
           role="listitem"
         >
           <a
-            class="c14"
+            class="c15"
             href="http://www.bbc.com/afrique/23248423"
           >
             &lt;Media Asset Page&gt;
           </a>
         </li>
         <li
-          class="c13"
+          class="c14"
           role="listitem"
         >
           <a
-            class="c14"
+            class="c15"
             href="http://www.bbc.com/afrique/23248423"
           >
             &lt;Media Asset Page&gt;
           </a>
         </li>
         <li
-          class="c13"
+          class="c14"
           role="listitem"
         >
           <a
-            class="c14"
+            class="c15"
             href="http://www.bbc.com/afrique/23248423"
           >
             &lt;Media Asset Page&gt;
           </a>
         </li>
         <li
-          class="c13"
+          class="c14"
           role="listitem"
         >
           <a
-            class="c14"
+            class="c15"
             href="https://bbc.com/pidgin"
           >
             this is the link text
           </a>
         </li>
         <li
-          class="c13"
+          class="c14"
           role="listitem"
         >
           <a
-            class="c14"
+            class="c15"
             href="https://bbc.com/pidgin"
           >
             this is the link text
           </a>
         </li>
         <li
-          class="c13"
+          class="c14"
           role="listitem"
         >
           <a
-            class="c14"
+            class="c15"
             href="https://bbc.com/pidgin"
           >
             this is the link text
@@ -6002,83 +6038,83 @@ exports[`CpsAssetPageMain should not show the pop-out timestamp when allowDateSt
       </ul>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c10"
+        class="c11"
       >
         Numbered list:
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <ul
-        class="c12"
+        class="c13"
         dir="ltr"
         role="list"
       >
         <li
-          class="c13"
+          class="c14"
           role="listitem"
         >
           <a
-            class="c14"
+            class="c15"
             href="http://www.bbc.com/afrique/23248423"
           >
             &lt;Media Asset Page&gt;
           </a>
         </li>
         <li
-          class="c13"
+          class="c14"
           role="listitem"
         >
           <a
-            class="c14"
+            class="c15"
             href="http://www.bbc.com/afrique/23248423"
           >
             &lt;Media Asset Page&gt;
           </a>
         </li>
         <li
-          class="c13"
+          class="c14"
           role="listitem"
         >
           <a
-            class="c14"
+            class="c15"
             href="http://www.bbc.com/afrique/23248423"
           >
             &lt;Media Asset Page&gt;
           </a>
         </li>
         <li
-          class="c13"
+          class="c14"
           role="listitem"
         >
           <a
-            class="c14"
+            class="c15"
             href="https://bbc.com/pidgin"
           >
             this is the link text
           </a>
         </li>
         <li
-          class="c13"
+          class="c14"
           role="listitem"
         >
           <a
-            class="c14"
+            class="c15"
             href="https://bbc.com/pidgin"
           >
             this is the link text
           </a>
         </li>
         <li
-          class="c13"
+          class="c14"
           role="listitem"
         >
           <a
-            class="c14"
+            class="c15"
             href="https://bbc.com/pidgin"
           >
             this is the link text
@@ -6087,10 +6123,10 @@ exports[`CpsAssetPageMain should not show the pop-out timestamp when allowDateSt
       </ul>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c10"
+        class="c11"
       >
         Lorem ipsum dolor sit amet, 
         <b>
@@ -6102,13 +6138,13 @@ exports[`CpsAssetPageMain should not show the pop-out timestamp when allowDateSt
         </b>
         ex ea commodo consequat. Duis aute irure dolor in reprehenderit
         <i
-          class="c15"
+          class="c16"
         >
            in voluptate velit esse cillum 
         </i>
         dolore "eu fugiat nulla" pariatur. 
         <a
-          class="c14"
+          class="c15"
           href="https://bbc.com/pidgin"
         >
           Excepteur
@@ -6117,86 +6153,86 @@ exports[`CpsAssetPageMain should not show the pop-out timestamp when allowDateSt
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c10"
+        class="c11"
       >
         Testing special characters: !"£$%^&*()_+=-{}[]:@~;'#&lt;&gt;?,./\\\`\\# 7.7 E 2₉₈₇₆₅₄₃₂₁₀⁹⁸⁷⁶⁵⁴³²¹⁰ⁿ☆★ŷŶŵŴÿþýüûúùø÷öõôóòñðïîíìëêéèçæåäãâáßÞÝÜÛÚÙØ×ÖÕÔÓÒÑÐÏÎÍÌËÊÉÈ
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c10"
+        class="c11"
       >
         ÇÆÆÅÄÃÂÁÀ¿¾½¼»º¸·¶µ´±°¯®¬«ª©¨§¦¥¤£¢¡ ~#
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c10"
+        class="c11"
       >
         Table:
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c10"
+        class="c11"
       >
         Social media embed:
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c10"
+        class="c11"
       >
         Quote box:
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c10"
+        class="c11"
       >
         Correspondent quote box:
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c10"
+        class="c11"
       >
         Fact box:
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c10"
+        class="c11"
       >
         ­
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c10"
+        class="c11"
       >
         Lorem ipsum
         <a
-          class="c14"
+          class="c15"
           href="https://bbc.com/pidgin"
         >
            dolor sit amet
@@ -6205,26 +6241,26 @@ exports[`CpsAssetPageMain should not show the pop-out timestamp when allowDateSt
       </p>
     </div>
     <div
-      class="c16"
+      class="c17"
     >
       <figure
         class="c3"
       >
         <div
-          class="c17"
+          class="c18"
         >
           <div
-            class="c18"
+            class="c19"
           >
             <div
-              class="c19"
+              class="c20"
             >
               <div
                 class="lazyload-placeholder"
               />
               <noscript />
               <p
-                class="c20"
+                class="c21"
                 role="text"
               >
                 <span
@@ -6241,10 +6277,10 @@ exports[`CpsAssetPageMain should not show the pop-out timestamp when allowDateSt
             </div>
           </div>
           <div
-            class="c21"
+            class="c22"
           >
             <figcaption
-              class="c22"
+              class="c23"
             >
               <span
                 class="c1"
@@ -6260,26 +6296,26 @@ exports[`CpsAssetPageMain should not show the pop-out timestamp when allowDateSt
       </figure>
     </div>
     <div
-      class="c16"
+      class="c17"
     >
       <figure
         class="c3"
       >
         <div
-          class="c17"
+          class="c18"
         >
           <div
-            class="c18"
+            class="c19"
           >
             <div
-              class="c19"
+              class="c20"
             >
               <div
                 class="lazyload-placeholder"
               />
               <noscript />
               <p
-                class="c20"
+                class="c21"
                 role="text"
               >
                 <span
@@ -6296,10 +6332,10 @@ exports[`CpsAssetPageMain should not show the pop-out timestamp when allowDateSt
             </div>
           </div>
           <div
-            class="c21"
+            class="c22"
           >
             <figcaption
-              class="c22"
+              class="c23"
             >
               <span
                 class="c1"
@@ -6315,33 +6351,33 @@ exports[`CpsAssetPageMain should not show the pop-out timestamp when allowDateSt
       </figure>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <ul
-        class="c12"
+        class="c13"
         dir="ltr"
         role="list"
       >
         <li
-          class="c13"
+          class="c14"
           role="listitem"
         >
           sunt in culpa qui officia deserunt mollit anim id est laborum
         </li>
         <li
-          class="c13"
+          class="c14"
           role="listitem"
         >
           sunt in culpa qui officia deserunt mollit anim id est laborum
         </li>
         <li
-          class="c13"
+          class="c14"
           role="listitem"
         >
           sunt in culpa qui officia deserunt mollit anim id est laborum
         </li>
         <li
-          class="c13"
+          class="c14"
           role="listitem"
         >
           v3 draft
@@ -6349,19 +6385,19 @@ exports[`CpsAssetPageMain should not show the pop-out timestamp when allowDateSt
       </ul>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c10"
+        class="c11"
       >
         This is transmission info 
       </p>
     </div>
     <div
-      class="c9"
+      class="c10"
     >
       <p
-        class="c10"
+        class="c11"
       >
         This is the footer 
       </p>
diff --git a/src/app/containers/MediaPlayer/__snapshots__/index.test.jsx.snap b/src/app/containers/MediaPlayer/__snapshots__/index.test.jsx.snap
index a06ea3f1829..ca3cedd74ba 100644
--- a/src/app/containers/MediaPlayer/__snapshots__/index.test.jsx.snap
+++ b/src/app/containers/MediaPlayer/__snapshots__/index.test.jsx.snap
@@ -107,12 +107,12 @@ exports[`MediaPlayer Calls the canonical placeholder when platform is canonical
 }
 
 .c3 {
-  cursor: pointer;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
+  cursor: default;
 }
 
 .c8 {
@@ -266,13 +266,18 @@ exports[`MediaPlayer Does not Call the canonical placeholder when platform is ca
 }
 
 .c2 {
+  left: 0;
+  overflow: hidden;
   position: absolute;
   top: 0;
-  left: 0;
   width: 100%;
   height: 100%;
+}
+
+.c3 {
   border: 0;
-  overflow: hidden;
+  height: 100%;
+  width: 100%;
 }
 
 <div>
@@ -282,14 +287,18 @@ exports[`MediaPlayer Does not Call the canonical placeholder when platform is ca
         <div
           class="c1"
         >
-          <iframe
-            allow="autoplay; fullscreen"
-            allowfullscreen=""
+          <div
             class="c2"
-            scrolling="no"
-            src="https://polling.test.bbc.co.uk/ws/av-embeds/articles/c123456789o/p01k6msp/en-GB"
-            title="Media player"
-          />
+          >
+            <iframe
+              allow="autoplay; fullscreen"
+              allowfullscreen=""
+              class="c3"
+              scrolling="no"
+              src="https://polling.test.bbc.co.uk/ws/av-embeds/articles/c123456789o/p01k6msp/en-GB"
+              title="Media player"
+            />
+          </div>
         </div>
       </figure>
     </div>
@@ -609,12 +618,12 @@ exports[`MediaPlayer Renders the canonical player with a caption 1`] = `
 }
 
 .c3 {
-  cursor: pointer;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
+  cursor: default;
 }
 
 .c8 {
diff --git a/src/app/containers/RadioPageBlocks/Blocks/LiveRadio/__snapshots__/index.test.jsx.snap b/src/app/containers/RadioPageBlocks/Blocks/LiveRadio/__snapshots__/index.test.jsx.snap
index bcc8f8261f0..e6c12a8e450 100644
--- a/src/app/containers/RadioPageBlocks/Blocks/LiveRadio/__snapshots__/index.test.jsx.snap
+++ b/src/app/containers/RadioPageBlocks/Blocks/LiveRadio/__snapshots__/index.test.jsx.snap
@@ -90,13 +90,18 @@ exports[`MediaPageBlocks LiveRadio should render correctly for canonical 1`] = `
 }
 
 .c3 {
+  left: 0;
+  overflow: hidden;
   position: absolute;
   top: 0;
-  left: 0;
   width: 100%;
   height: 100%;
+}
+
+.c4 {
   border: 0;
-  overflow: hidden;
+  height: 100%;
+  width: 100%;
 }
 
 @media (min-width:63rem) {
@@ -121,14 +126,18 @@ exports[`MediaPageBlocks LiveRadio should render correctly for canonical 1`] = `
     <div
       class="c2"
     >
-      <iframe
-        allow="autoplay; fullscreen"
-        allowfullscreen=""
+      <div
         class="c3"
-        scrolling="no"
-        src="https://polling.test.bbc.co.uk/ws/av-embeds/media/externalId/id/ko"
-        title="Audio player"
-      />
+      >
+        <iframe
+          allow="autoplay; fullscreen"
+          allowfullscreen=""
+          class="c4"
+          scrolling="no"
+          src="https://polling.test.bbc.co.uk/ws/av-embeds/media/externalId/id/ko"
+          title="Audio player"
+        />
+      </div>
     </div>
   </div>
 </div>
@@ -224,13 +233,18 @@ exports[`MediaPageBlocks LiveRadio when externalId is bbc_oromo_radio it is over
 }
 
 .c3 {
+  left: 0;
+  overflow: hidden;
   position: absolute;
   top: 0;
-  left: 0;
   width: 100%;
   height: 100%;
+}
+
+.c4 {
   border: 0;
-  overflow: hidden;
+  height: 100%;
+  width: 100%;
 }
 
 @media (min-width:63rem) {
@@ -255,14 +269,18 @@ exports[`MediaPageBlocks LiveRadio when externalId is bbc_oromo_radio it is over
     <div
       class="c2"
     >
-      <iframe
-        allow="autoplay; fullscreen"
-        allowfullscreen=""
+      <div
         class="c3"
-        scrolling="no"
-        src="https://polling.test.bbc.co.uk/ws/av-embeds/media/bbc_afaanoromoo_radio/id/om"
-        title="Audio player"
-      />
+      >
+        <iframe
+          allow="autoplay; fullscreen"
+          allowfullscreen=""
+          class="c4"
+          scrolling="no"
+          src="https://polling.test.bbc.co.uk/ws/av-embeds/media/bbc_afaanoromoo_radio/id/om"
+          title="Audio player"
+        />
+      </div>
     </div>
   </div>
 </div>
diff --git a/src/app/containers/RadioPageBlocks/__snapshots__/index.test.jsx.snap b/src/app/containers/RadioPageBlocks/__snapshots__/index.test.jsx.snap
index 51d299d1c33..b0e07e3ae18 100644
--- a/src/app/containers/RadioPageBlocks/__snapshots__/index.test.jsx.snap
+++ b/src/app/containers/RadioPageBlocks/__snapshots__/index.test.jsx.snap
@@ -182,13 +182,18 @@ exports[`Radio Page Blocks should match snapshot for Canonical 1`] = `
 }
 
 .c5 {
+  left: 0;
+  overflow: hidden;
   position: absolute;
   top: 0;
-  left: 0;
   width: 100%;
   height: 100%;
+}
+
+.c6 {
   border: 0;
-  overflow: hidden;
+  height: 100%;
+  width: 100%;
 }
 
 @media (min-width:20rem) and (max-width:37.4375rem) {
@@ -260,14 +265,18 @@ exports[`Radio Page Blocks should match snapshot for Canonical 1`] = `
       <div
         class="c4"
       >
-        <iframe
-          allow="autoplay; fullscreen"
-          allowfullscreen=""
+        <div
           class="c5"
-          scrolling="no"
-          src="https://polling.test.bbc.co.uk/ws/av-embeds/media/bbc_amharic_radio/liveradio/am"
-          title="Audio player"
-        />
+        >
+          <iframe
+            allow="autoplay; fullscreen"
+            allowfullscreen=""
+            class="c6"
+            scrolling="no"
+            src="https://polling.test.bbc.co.uk/ws/av-embeds/media/bbc_amharic_radio/liveradio/am"
+            title="Audio player"
+          />
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/app/containers/RadioPageMain/__snapshots__/index.test.jsx.snap b/src/app/containers/RadioPageMain/__snapshots__/index.test.jsx.snap
index fc038f28c3e..dc7706f7e26 100644
--- a/src/app/containers/RadioPageMain/__snapshots__/index.test.jsx.snap
+++ b/src/app/containers/RadioPageMain/__snapshots__/index.test.jsx.snap
@@ -489,13 +489,18 @@ exports[`Radio Page Main should match snapshot for Canonical 1`] = `
 }
 
 .c8 {
+  left: 0;
+  overflow: hidden;
   position: absolute;
   top: 0;
-  left: 0;
   width: 100%;
   height: 100%;
+}
+
+.c9 {
   border: 0;
-  overflow: hidden;
+  height: 100%;
+  width: 100%;
 }
 
 @supports (display:grid) {
@@ -873,14 +878,18 @@ exports[`Radio Page Main should match snapshot for Canonical 1`] = `
               <div
                 class="c7"
               >
-                <iframe
-                  allow="autoplay; fullscreen"
-                  allowfullscreen=""
+                <div
                   class="c8"
-                  scrolling="no"
-                  src="https://polling.test.bbc.co.uk/ws/av-embeds/media/bbc_amharic_radio/liveradio/am"
-                  title="Audio player"
-                />
+                >
+                  <iframe
+                    allow="autoplay; fullscreen"
+                    allowfullscreen=""
+                    class="c9"
+                    scrolling="no"
+                    src="https://polling.test.bbc.co.uk/ws/av-embeds/media/bbc_amharic_radio/liveradio/am"
+                    title="Audio player"
+                  />
+                </div>
               </div>
             </div>
           </div>