Topic: Video background with parallax effect
LauraPitskhelauri
pro
asked 7 years ago
Hosboss
pro
answered 7 years ago
Start your code here
<section>
<div class="view" style="background-image: none; z-index: 0; height: 500px;">
<div class="full-bg-img">
<div class="mask rgba-white-light">
<div class="container flex-center text-center">
<div class="row mt-5 py-5">
<div class="col-md-12 wow fadeIn mb-3"
style="animation-name: none; visibility: visible;">
<div class="text-center">
<h1 class="display-2 mb-2 wow fadeInDown green-text" data-wow-delay="0.3s">
TEXTE <a class="white-text font-bold">Lorem</a>
</h1>
<h5 class="font-up mb-3 mt-1 font-bold wow fadeInDown" data-wow-delay="0.4s">
Lorem ipsum
</h5>
<a class="btn btn-outline-white btn-lg wow fadeInDown waves-effect waves-light"
href="#" data-wow-delay="0.4s">
Un bouton par exemple
</a>
</div>
</div>
</div>
</div>
<div class="video-parallax">
<video class="video-parall" src="{{link to your video)" autoplay="" loop="">
</video>
</div>
</div>
</div>
</section>
css :
/*!* Parallax video styles*!*/
.video-parallax {
clip: rect(0, 100vw, 700px, 0); /*!* Change second and third value to manipulate the width and height of your video *!*/
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
visibility: hidden;
z-index: -100;
}
.view .video-parall {
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
min-width: 100vw;
min-height: 100vh;
max-width: none;
max-height: none;
visibility: visible;
z-index: -1
}
En espérant que c'est ce que vous cherchez !
Ollie Vincent pro commented 7 years ago
Hi, Try the link I suggested above :) otherwise could you try to explain in more detail (preferably in English). Thanks :)
Ollie Vincent
pro
answered 7 years ago
Mikołaj Smoleński
staff
answered 7 years ago
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: Other
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No