Include overlay changes (#26239)

* Include style changes for updated video design * Move duration pill on non playable videos
guardian · Jun 27, 2023 · a9e521c · a9e521c
1 parent 901a71e
commit a9e521c
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 24 deletions.
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
@@ -43,15 +43,6 @@
     }
 }
 
-.video-playlist__item:not(.vertical-video-width)  .youtube-media-atom iframe,
-.video-playlist__item:not(.vertical-video-width)  .youtube-media-atom .vjs-big-play-button {
-    @include mq($until: desktop) {
-        top: gs-height(3) - (get-line-height(textSans, 3) + 4px);
-        bottom: 0;
-        height: auto;
-    }
-}
-
 .video-playlist__item--active .youtube-media-atom {
     opacity: 1;
 }
@@ -145,6 +136,14 @@
     @include hide;
 }
 
+.video-playlist__item .youtube-media-atom__iframe.youtube__video-started ~ .video-overlay {
+    @include hide;
+}
+
+.video-playlist__item .youtube-media-atom__iframe.youtube__video-started ~ .video-overlay__duration {
+    @include hide;
+}
+
 .youtube-media-atom__iframe.youtube__video-started:not(.youtube__video-ended) ~ .youtube-media-atom__overlay {
     @include fade-out;
     transition-delay: 500ms;

diff --git a/static/src/stylesheets/module/facia-garnett/_container--video.scss b/static/src/stylesheets/module/facia-garnett/_container--video.scss
@@ -362,6 +362,8 @@ $video-width-desktop: 700px;
 
 .video-playlist__icon {
     position: absolute;
+    top: 0;
+    bottom: 0;
     width: 30px;
     height: 30px;
     margin: auto;
@@ -415,7 +417,7 @@ $video-width-desktop: 700px;
     position: relative;
     display: inline-block;
     vertical-align: top;
-    width: 70%;
+    width: 90%;
     background-color: $brightness-7;
     margin-left: $gs-gutter / 2;
     margin-bottom: $gs-baseline;
@@ -610,25 +612,20 @@ $video-width-desktop: 700px;
     position: absolute;
     z-index: 2;
     white-space: normal;
-    padding: 0 $gs-gutter/4 $gs-baseline * 2;
+    padding: 2.5rem $gs-gutter/4 $gs-baseline * 2;
+    padding-top: 0;
+    padding-bottom: 0;
     box-sizing: border-box;
-    border-top: 1px solid $highlight-main;
     color: #ffffff;
-    background-color: rgba(0, 0, 0, .9);
-    min-height: gs-height(3);
-    margin-bottom: -(get-line-height(textSans, 3) + 4px);
+    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .7) 25%);
     pointer-events: auto;
     width: 100%;
+    bottom: 0;
+
     @include mq(desktop, leftCol) {
         opacity: 0;
         transition: opacity .4s ease-out;
     }
-    @include mq(desktop) {
-        position: absolute;
-        top: $gs-baseline;
-        left: $gs-gutter;
-        width: gs-span(3);
-    }
 
     .video-playlist__item .vjs-playing ~ & {
         @include mq(desktop) {
@@ -640,6 +637,7 @@ $video-width-desktop: 700px;
     .video-overlay__headline {
         @include fs-headline(2);
         font-weight: 400;
+        padding-bottom: 0;
         @include mq(mobileLandscape) {
             @include fs-headline(3);
             font-weight: 400;