Commit a2ddd0c8217070e843723b6beefb7e68c06fc5bd
1 parent
2e028a03
video header
Showing
4 changed files
with
31 additions
and
4 deletions
Show diff stats
frontend/views/site/index.php
| @@ -18,10 +18,14 @@ JS; | @@ -18,10 +18,14 @@ JS; | ||
| 18 | $this->registerJs($js, View::POS_END); | 18 | $this->registerJs($js, View::POS_END); |
| 19 | ?> | 19 | ?> |
| 20 | 20 | ||
| 21 | -<section> | ||
| 22 | - <div class="background-kben main_video_yt"> | ||
| 23 | - <iframe width="100%" height="100%" src="https://www.youtube.com/embed/yVNaRNlAVDY" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> | 21 | +<section class="video_main"> |
| 22 | + <div id="video-bg"> | ||
| 23 | + <video width="100%" height="auto" muted="" autoplay="autoplay" loop="loop" preload="auto"> | ||
| 24 | + <source src="/video/kbvid1.mp4" type="video/mp4"> | ||
| 25 | + <source src="/video/kbvid1.ogg" type="video/ogg"> | ||
| 26 | + </video> | ||
| 24 | </div> | 27 | </div> |
| 28 | + | ||
| 25 | </section> | 29 | </section> |
| 26 | <!----> | 30 | <!----> |
| 27 | <!--<section class="no-mb mtop-25">--> | 31 | <!--<section class="no-mb mtop-25">--> |
frontend/web/css/style.css
| @@ -312,7 +312,30 @@ a.sqre_btn { | @@ -312,7 +312,30 @@ a.sqre_btn { | ||
| 312 | } | 312 | } |
| 313 | 313 | ||
| 314 | .card1{padding-top:60px;} | 314 | .card1{padding-top:60px;} |
| 315 | -.main_video_yt{width:100%;height: calc(100vh - 101px);} | 315 | +/*.main_video_yt{width:100%;height: calc(100vh - 101px);}*/ |
| 316 | +#video-bg{ | ||
| 317 | + position: relative; | ||
| 318 | + top: 0; | ||
| 319 | + left: 0; | ||
| 320 | + z-index: -1000; | ||
| 321 | + width: 100%; | ||
| 322 | + height: 100%; | ||
| 323 | + max-height: calc(100vh - 101px); | ||
| 324 | + overflow: hidden; | ||
| 325 | + display: flex; | ||
| 326 | + align-items: center; | ||
| 327 | + justify-content: center; | ||
| 328 | +} | ||
| 329 | +#video-bg:after { | ||
| 330 | + content: ''; | ||
| 331 | + position: absolute; | ||
| 332 | + top: 0; | ||
| 333 | + left: 0; | ||
| 334 | + width: 100%; | ||
| 335 | + height: 100%; | ||
| 336 | + background: rgba(0, 0, 0, 0.1); | ||
| 337 | + box-shadow: inset 0px 250px 250px -250px black, inset 0px -250px 250px -250px black; | ||
| 338 | +} | ||
| 316 | 339 | ||
| 317 | @media(min-width:992px) and (max-width:1199px){ | 340 | @media(min-width:992px) and (max-width:1199px){ |
| 318 | .pr_cover { | 341 | .pr_cover { |
No preview for this file type
No preview for this file type