Sandbox/tci 1176 video embed triage (#880)

* TCI-1176: correct embed classes & suppress custom ratio option temporarily * Fixed the media button and cover video over-lapping issue. --------- Co-authored-by: Mel Wong <[email protected]> Co-authored-by: Aditya R Joshi <[email protected]>
JudicialCouncilOfCalifornia · Mar 12, 2024 · 031818d · 031818d
1 parent 50d4463
commit 031818d
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 38 deletions.
diff --git a/source/_patterns/00-protons/general/_embed.scss b/source/_patterns/00-protons/general/_embed.scss
@@ -7,16 +7,18 @@ iframe {
 .embed-responsive {
   @include u-position(relative);
   @include u-maxw(full);
-  @include u-height(0);
   @include u-overflow(hidden);
+  aspect-ratio: 16/9;
+  height: 100%;
 
   .embed-responsive-item,
   iframe,
   embed,
   object,
   video {
     @include u-pin(top, left);
-    @include u-height(full);
+    position: relative;
+    height: inherit;
     z-index: 1;
   }
 }
diff --git a/source/_patterns/02-molecules/video/_video.scss b/source/_patterns/02-molecules/video/_video.scss
@@ -58,35 +58,15 @@
   }
 }
 
-/* media edit button fix */
-.jcc-video__video-container{
-  @include u-position(relative);
-  @include u-height(0);
-}
-
-.jcc-video__video-container-editor {
-  @include u-display(flex);
-  flex-direction: column;
-  justify-content: space-evenly;
-  gap: 10px;
-  height: auto;
-  padding-bottom: 10px !important;
-}
-
-.jcc-video__video-container-editor  > .embed-responsive-item {
+// rules to ensure that multiple video edit items are 
+// not overlapping or hiding media button.
+.jcc-video__embed_items{
   position: relative;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  margin: 0;
-  width: 100%;
+  padding-bottom:10px;
   height: 100%;
 }
 
-.jcc-video__video-container > .embed-responsive-item {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
+button.media-library-item__edit{
+  margin-top:10px;
+  margin-bottom:10px;
 }
diff --git a/source/_patterns/02-molecules/video/video.twig b/source/_patterns/02-molecules/video/video.twig
@@ -33,13 +33,15 @@
 {% endif %}
 
 {#
+  TO-DO: Breaks presentation for both view and edit
   Common aspect ratios:
     - Cinemascope 21:9 (.428571429)
     - HD video 16:9 (.5625)
     - Classic film 3:2 (.666666667)
     - Standard monitor 4:3 (.75)
+
+  {% set ratio = video.height / video.width %}
 #}
-{% set ratio = video.height / video.width %}
 
 {# Store the url so the video doesn't autoplay, #}
 {# and use javascript to start it when the cover is clicked #}
@@ -51,23 +53,20 @@
 {# Video layout classes #}
 {% set video_classes =  video_classes ? video.video_classes : ""%}
 
-{# set classes accrdoing to page : in ckeditor or  display page #}
-{% set added_class =  "media/body/preview" in video.path ? "jcc-video__video-container-editor" : "jcc-video__video-container embed-responsive" %}
-
 {% set classes = [
   'jcc-video',
+  'embed-responsive',
   video_classes,
-  added_class
 ]|merge(video.classes|default([])) %}
 
-<div class="{{ classes|join(' ') }}" style="padding-bottom: {{ ratio * 100 }}%;">
+{#<div class="{{ classes|join(' ') }}" style="padding-bottom: {{ ratio * 100 }}%;">#}
+<div class="{{ classes|join(' ') }}">
   <iframe class="embed-responsive-item" title="{{ video.provider ~ ' ' ~ 'video player'|t }}"
     width="{{ video.width }}" height="{{ video.height }}"
     src="{{ url }}" data-src="{{ data_url }}"
-    frameborder="0" allow="autoplay">
-  </iframe>
+    frameborder="0" allow="autoplay"></iframe>
 
   {% if video.cover %}
     <button class="jcc-video__cover" style="background-image: url({{ video.cover }});">{{ "Play video"|t }}</button>
   {% endif %}
-</div>
+</div>