Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Video background with parallax effect

LauraPitskhelauri pro asked 6 years ago


Can You, please point me to the example of parallax effect for the background video?I am trying to implement it on my website but all examples i have found in paid bundle are for image background parallax.

Hosboss pro answered 6 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 6 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 6 years ago


Hi Laura, You could try this plugin available on Github https://github.com/linnett/backgroundVideo that works (I tested). The ReadMe file has a lot of useful info on how to set it up :)

Mikołaj Smoleński staff answered 6 years ago


Hello Laura, I'm sorry, but our parallax effect is designed only for working with image background. Regards

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: Other
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags