Sandbox/tci 1176 video embed triage (#882)

* Added parent container for embedded videos.

* Fixed the  typo for the closing div tag

---------

Co-authored-by: Aditya R Joshi <aditya.joshi-t@jud.ca.gov>

source/_patterns/02-molecules/video/_video.scss

@@ -69,4 +69,14 @@
 button.media-library-item__edit{
   margin-top:10px;
   margin-bottom:10px;
+}
+
+// To show video stacked up with image media.
+.jcc-video__video-container{
+  position: relative;
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  float: left;
+  margin-top: 20px;
 }

source/_patterns/02-molecules/video/video.twig

@@ -60,15 +60,17 @@
 ]|merge(video.classes|default([])) %}
 
 {#<div class="{{ classes|join(' ') }}" style="padding-bottom: {{ ratio * 100 }}%;">#}
-<div class="{{ classes|join(' ') }}">
-  <div class = "jcc-video__embed_items">
-    <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>
+<div class = "jcc-video__video-container">
+  <div class="{{ classes|join(' ') }}">
+    <div class = "jcc-video__embed_items">
+      <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>
 
-    {% if video.cover %}
-      <button class="jcc-video__cover" style="background-image: url({{ video.cover }});">{{ "Play video"|t }}</button>
-    {% endif %}
+      {% if video.cover %}
+        <button class="jcc-video__cover" style="background-image: url({{ video.cover }});">{{ "Play video"|t }}</button>
+      {% endif %}
+    </div>
   </div>
-</div>
+</div>