Feature/TCI 1176 edit button video issue (#876)

* Added logic for different display size for video and fixed the edit video missing.

* Added comments for _video_embed.scss

---------

Co-authored-by: Aditya R Joshi <[email protected]>

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

@@ -48,16 +48,32 @@
   {% set url = '' %}
 {% endif %}
 
+{# Video layout classes #}
+{% if video_classes %}
+  {% set video_classes= video.video_classes %}
+{% else %}
+  {% set video_classes= "" %}
+{% endif %}
+
+{# if in ckeditor #}
+{% if "media/body/preview" in video.path %}
+ {% set added_class = "video-container-editor" %}
+{% else %}
+ {% set added_class = "video-container embed-responsive" %}
+{% endif %}
+
 {% set classes = [
   'jcc-video',
-  'embed-responsive',
+  video_classes,
+  added_class 
 ]|merge(video.classes|default([])) %}
 
 <div class="{{ classes|join(' ') }}" style="padding-bottom: {{ ratio * 100 }}%;">
   <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>

source/css/_video_embed.scss

@@ -0,0 +1,33 @@
+/* media edit button fix */
+.video-container{
+    position: relative;
+    height: 0;   
+}
+
+.video-container-editor{
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    justify-content: space-evenly;
+    gap: 10px;
+    height:auto;
+    padding-bottom:10px !important;
+}
+
+.video-container-editor  > .embed-responsive-item{
+    position: relative;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.video-container > .embed-responsive-item{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}