From a2ddd0c8217070e843723b6beefb7e68c06fc5bd Mon Sep 17 00:00:00 2001
From: zhegal <zhegal@gmail.com>
Date: Thu, 18 Jan 2018 12:52:58 +0200
Subject: [PATCH] video header

---
 frontend/views/site/index.php | 10 +++++++---
 frontend/web/css/style.css    | 25 ++++++++++++++++++++++++-
 frontend/web/video/kbvid1.mp4 | Bin 0 -> 5487650 bytes
 frontend/web/video/kbvid1.ogg | Bin 0 -> 467747 bytes
 4 files changed, 31 insertions(+), 4 deletions(-)
 create mode 100644 frontend/web/video/kbvid1.mp4
 create mode 100644 frontend/web/video/kbvid1.ogg

diff --git a/frontend/views/site/index.php b/frontend/views/site/index.php
index 3912524..15dea98 100644
--- a/frontend/views/site/index.php
+++ b/frontend/views/site/index.php
@@ -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">-->
diff --git a/frontend/web/css/style.css b/frontend/web/css/style.css
index 3f9ef16..61fdad0 100644
--- a/frontend/web/css/style.css
+++ b/frontend/web/css/style.css
@@ -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 {
diff --git a/frontend/web/video/kbvid1.mp4 b/frontend/web/video/kbvid1.mp4
new file mode 100644
index 0000000..91927ee
Binary files /dev/null and b/frontend/web/video/kbvid1.mp4 differ
diff --git a/frontend/web/video/kbvid1.ogg b/frontend/web/video/kbvid1.ogg
new file mode 100644
index 0000000..d0962b6
Binary files /dev/null and b/frontend/web/video/kbvid1.ogg differ
--
libgit2 0.21.4