video header

Eugeny Galkovskiy
1 parent 2e028a03
Showing 4 changed files with 31 additions and 4 deletions Show diff stats
frontend/views/site/index.php
frontend/web/css/style.css
frontend/web/video/kbvid1.mp4
frontend/web/video/kbvid1.ogg
@@ -18,10 +18,14 @@ JS;
 $this->registerJs($js, View::POS_END);
 ?>
  
-<section>
-    <div class="background-kben main_video_yt">
-        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/yVNaRNlAVDY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+<section class="video_main">
+    <div id="video-bg">
+        <video width="100%" height="auto" muted="" autoplay="autoplay" loop="loop" preload="auto">
+            <source src="/video/kbvid1.mp4" type="video/mp4">
+            <source src="/video/kbvid1.ogg" type="video/ogg">
+        </video>
     </div>
+
 </section>
 <!---->
 <!--<section class="no-mb mtop-25">-->
@@ -312,7 +312,30 @@ a.sqre_btn {
 }
  
 .card1{padding-top:60px;}
-.main_video_yt{width:100%;height: calc(100vh - 101px);}
+/*.main_video_yt{width:100%;height: calc(100vh - 101px);}*/
+#video-bg{
+    position: relative;
+    top: 0;
+    left: 0;
+    z-index: -1000;
+    width: 100%;
+    height: 100%;
+    max-height: calc(100vh - 101px);
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+#video-bg:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.1);
+    box-shadow: inset 0px 250px 250px -250px black, inset 0px -250px 250px -250px black;
+}
  
 @media(min-width:992px) and (max-width:1199px){
     .pr_cover {