Move duration pill on non playable videos

guardian · Jun 26, 2023 · 8f5e89b · 8f5e89b
1 parent 7347748
commit 8f5e89b
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 11 deletions.
diff --git a/common/app/views/fragments/atoms/youtube.scala.html b/common/app/views/fragments/atoms/youtube.scala.html
@@ -89,7 +89,7 @@
                         <div class='gs-container'>
                             <div class='content__main-column'>
                                 <button class='youtube-media-atom__immersive-interface' style="border: none;">
-                                    <div class="youtube-media-atom__play-button vjs-control-text centred-button">
+                                    <div class="youtube-media-atom__play-button vjs-control-text">
                                         Play Video
                                         @fragments.inlineSvg("play", "icon")
                                     </div>

diff --git a/common/app/views/fragments/media/video.scala.html b/common/app/views/fragments/media/video.scala.html
@@ -32,6 +32,9 @@
                 }
             </video>
             @if(showOverlay){
+            <span class="video-overlay__duration">
+                @player.video.videos.formattedDuration
+            </span>
             <div class="video-overlay">
                 @seriesTag.map { series =>
                     <div class="video-overlay__series-label">
@@ -50,9 +53,6 @@
                         <h1 class="video-overlay__title">@player.title</h1>
                     }
                 </div>
-                <span class="video-overlay__duration">
-                    @player.video.videos.formattedDuration
-                </span>
             </div>
             }
         </div>

diff --git a/static/src/stylesheets/module/atoms/_youtube.scss b/static/src/stylesheets/module/atoms/_youtube.scss
@@ -183,13 +183,6 @@ youtube-media-atom:not(.youtube-related-videos) .youtube-media-atom__iframe.yout
     transition: none;
 }
 
-.youtube-media-atom__play-button.vjs-control-text.centered-button {
-    bottom: 44%;
-    left: 40%;
-    background-color: rgba(18, 18, 18, .6);
-    z-index: 3;
-}
-
 
 .youtube-media-atom__bottom-bar__duration {
     @include font($f-sans-serif-text, bold, 13, 16);

diff --git a/static/src/stylesheets/module/facia-garnett/_container--video.scss b/static/src/stylesheets/module/facia-garnett/_container--video.scss
@@ -233,6 +233,8 @@ $video-width-desktop: 700px;
 
 .video-playlist__icon {
     position: absolute;
+    top: 0;
+    bottom: 0;
     width: 30px;
     height: 30px;
     margin: auto;