Improve showing video in product card

Author: bruecksen

bakeup/static/css/project.css

@@ -12819,6 +12819,7 @@ input.form-control.product-quantity::-webkit-outer-spin-button, input.form-contr
 }
 .figure.has-video {
   overflow: hidden;
+  position: relative;
 }
 .figure.has-video:hover {
   cursor: pointer;
@@ -12828,18 +12829,36 @@ input.form-control.product-quantity::-webkit-outer-spin-button, input.form-contr
   text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
   pointer-events: none;
 }
-.figure.has-video img {
+@media (max-width: 768px) {
+  .figure.has-video .fa-circle-play {
+    font-size: 3rem !important;
+  }
+}
+.figure.has-video .ratio {
+  z-index: -1;
   position: absolute;
-  z-index: 2;
   top: 50%;
   left: 50%;
   -webkit-transform: translate(-50%, -50%);
           transform: translate(-50%, -50%);
+  max-height: 100%;
 }
-.figure.has-video video {
-  z-index: 1;
+.figure.has-video .video-container {
+  display: none;
 }
-.figure.has-video .btn-mute {
+.figure.has-video .video-container video {
+  height: 100%;
+  width: auto;
+  -o-object-fit: cover;
+     object-fit: cover;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+.figure.has-video .video-container .btn-mute {
+  display: none;
   z-index: 1;
   position: absolute;
   bottom: 2px;
@@ -12848,13 +12867,13 @@ input.form-control.product-quantity::-webkit-outer-spin-button, input.form-contr
   text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
   border: 0;
 }
-.figure.has-video .btn-mute.active {
+.figure.has-video .video-container .btn-mute.active {
   color: #fff;
 }
-.figure.has-video .btn-mute .fa-volume-high {
+.figure.has-video .video-container .btn-mute .fa-volume-high {
   display: block;
 }
-.figure.has-video .btn-mute .fa-volume-xmark {
+.figure.has-video .video-container .btn-mute .fa-volume-xmark {
   display: none;
 }
 

bakeup/static/css/project.min.css

@@ -602,43 +602,55 @@ $(function(){
     });
     $('.product-card .figure.has-video img').click(function(){
         var figure = $(this).parents('.figure');
-        $(figure).find('img').hide();
         var play_button = $(figure).find('.fa-circle-play');
-        var video = $(figure).find('video');
+        var video = $(figure).find('.video-container');
+        var mute_btn = $(figure).find('.btn-mute');
 
         if (video.length) {
-            video = video.get(0);
-            video.play();
-            video.addEventListener('play', function() {
+            mute_btn.show();
+            $(figure).find('.product-tags').hide();
+            video.css('height',figure.outerHeight() + "px");
+            video.show();
+            var video_element = video.find('video').get(0);
+            video_element.play();
+            $(figure).find('img').hide();
+            video_element.addEventListener('play', function() {
                 $(this).find('.fa-circle-play').hide();
             });
 
             // Event listener for 'pause' to show the button
-            video.addEventListener('pause', function() {
+            video_element.addEventListener('pause', function() {
                 play_button.show();
             });
+            // Event listener for 'ended' to show the button
+            video_element.addEventListener('ended', function() {
+                play_button.show();
+                $(figure).find('img').show();
+                $(figure).find('.product-tags').show();
+                video.hide();
+            });
 
             // Initial icon setup to play or pause
-            video.addEventListener('playing', () => {
+            video_element.addEventListener('playing', () => {
                 play_button.hide();
             });
-            $(video).add(play_button).click(function() {
-                if (video.paused) {
-                    video.play();
+            $(video_element).add(play_button).click(function() {
+                if (video_element.paused) {
+                    video_element.play();
                     play_button.hide();
                 } else {
-                    video.pause();
+                    video_element.pause();
                     play_button.show();
                 }
             });
             $(figure).find('.btn-mute').click(function() {
-                video.muted = !video.muted;
-                if (video.muted) {
-                    $(figure).find('.fa-volume-xmark').show();
-                    $(figure).find('.fa-volume-high').hide();
+                video_element.muted = !video_element.muted;
+                if (video_element.muted) {
+                    mute_btn.find('.fa-volume-xmark').show();
+                    mute_btn.find('.fa-volume-high').hide();
                 } else {
-                    $(figure).find('.fa-volume-xmark').hide();
-                    $(figure).find('.fa-volume-high').show();
+                    mute_btn.find('.fa-volume-xmark').hide();
+                    mute_btn.find('.fa-volume-high').show();
                 }
             })
         }

bakeup/static/js/project.js

@@ -140,19 +140,40 @@ input.form-control.product-quantity {
       z-index: 3;
       text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
       pointer-events: none;
+      @media (max-width: 768px) {
+        font-size: 3rem!important;
+      }
     }
     img {
+      // position: absolute;
+      // z-index: 2;
+      // top: 50%;
+      // left: 50%;
+      // transform: translate(-50%, -50%);
+    }
+    overflow: hidden;
+    position: relative;
+    .ratio {
+      z-index: -1;
       position: absolute;
-      z-index: 2;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
+      max-height: 100%;
     }
-    overflow: hidden;
-    video {
-      z-index: 1;
-    }
+    .video-container {
+      display: none;
+      video {
+        height: 100%;
+        width: auto;
+        object-fit: cover;
+        position: absolute;
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+      }
       .btn-mute {
+        display: none;
         z-index: 1;
         position: absolute;
         bottom: 2px;
@@ -176,6 +197,7 @@ input.form-control.product-quantity {
       //   left: 50%;
       //   color: $black;
       // }
+    }
   }
 }
 

bakeup/static/js/project.min.js

@@ -11,20 +11,20 @@
     <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" class="card-img-top img-fluid img-hover" alt="product image">
     {% endthumbnail %}
     {% endif %}
-    <div class="position-absolute bottom-20 start-20 z-3">
+    <div class="position-absolute bottom-20 start-20 z-3 product-tags">
         {% for tag in product.tags.all %}<span class="badge rounded-pill bg-dark me-1"><i class="fas fa-tag"></i> {{ tag }}</span>{% endfor %}
     </div>
     {% if product.video_file %}
     <i class="fa-regular fa-circle-play position-absolute z-3 top-50 start-50 translate-middle text-white fs-1"></i>
-    <div class="ratio ratio-16x9">
+    <div class="video-container position-relative">
         <video>
             <source src="{{ product.video_file.url }}" type="video/mp4">
             Your browser does not support the video tag.
         </video>
+        <button id="btn-mute" class="btn btn-text btn-mute">
+            <i class="fa-solid fa-fw fa-volume-xmark"></i>
+            <i class="fa-solid fa-fw fa-volume-high"></i>
+        </button>
     </div>
-    <button id="btn-mute" class="btn btn-text btn-mute">
-        <i class="fa-solid fa-fw fa-volume-xmark"></i>
-        <i class="fa-solid fa-fw fa-volume-high"></i>
-    </button>
     {% endif %}
 </div>