feats

resources/static/css/common.css

@@ -379,6 +379,10 @@
   width: 10%;
   box-shadow: none;
 }
+.dashboard-page .dash-carousel .left,
+.dashboard-page .dash-carousel .right {
+  height: calc(100% - 100px);
+}
 .dashboard-page .dash-carousel .item {
   height: 100vh;
 }
@@ -393,6 +397,14 @@
   background-origin: border-box;
   background-size: contain;
 }
+.dashboard-page .dash-carousel .item .item-video {
+  height: 100%;
+  width: 100%;
+}
+.dashboard-page .dash-carousel .item .item-video video {
+  width: 100%;
+  height: 100%;
+}
 .dashboard-page .act-list {
   margin: 96px 0;
 }

resources/templates/main/dashboard.html

@@ -173,6 +173,14 @@
       parent.onNavMenuClick(menuId);
       parent.subMenuClick(subMenuName);
     }
+
+    function videoOnPlay() {
+      $('#myNiceCarousel').carousel('pause')
+    }
+
+    function videoOnPause() {
+      $('#myNiceCarousel').carousel('cycle')
+    }
     
     function loadPage2() {
       var imageTpl = [
@@ -186,7 +194,7 @@
       var videoTpl = [
         '<div class="item {active}">',
         '  <div class="item-video">',
-        '    <video src="{src}" controls="controls"></video>',
+        '    <video src="{src}" controls="controls" onplay="videoOnPlay()" onpause="videoOnPause()" onended="videoOnPause()"></video>',
         '  </div>',
         '</div>',
       ].join('');