Include style changes for updated video design

guardian · Jun 26, 2023 · 7347748 · 7347748
1 parent 2fa39ca
commit 7347748
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 23 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">
+                                    <div class="youtube-media-atom__play-button vjs-control-text centred-button">
                                         Play Video
                                         @fragments.inlineSvg("play", "icon")
                                     </div>

diff --git a/static/src/stylesheets/module/atoms/_youtube.scss b/static/src/stylesheets/module/atoms/_youtube.scss
@@ -33,15 +33,6 @@
     }
 }
 
-.video-playlist__item .youtube-media-atom iframe,
-.video-playlist__item .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;
 }
@@ -130,6 +121,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;
@@ -184,6 +183,13 @@ 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
@@ -257,7 +257,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;
@@ -400,27 +400,23 @@ $video-width-desktop: 700px;
 }
 
 .video-overlay {
-    position: relative;
+    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) {
@@ -432,6 +428,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;