How do i add Video background to a section ?

Follow the steps below to add a video background to a section:

Step 1 :

  • On the builder open custom CSS settings and past the following code:

.ytplayer-container.background {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: all 1s;
}
.loaded .ytplayer-container.background {
   opacity: 1;
}

Step 2 :

  • On the builder, open javascript settings then click on footer code and paste the following code:

<script src="/plugins/jquery-youtubebackground/ytbg.js"></script>
<script>
$(function() {
    var sectionId = "xxxxx";
    var videoId = "yyyyy";
    $("#"+sectionId).YTPlayer({videoId});
});
</script>
  • Lastly, on the javascript above replace xxxxx with the section ID that you want to show the video on as a background.

  • And replace yyyyy with the youtube video ID.

For a better user experience and to hide the ugly Youtube loader from the user, make sure to add an image background to the section, so at first, the user will see the image, and once the video is fully loaded the image will fade away and the video starts playing in mute mode.
To add an overlay color to the video simply add the desired color to the section background.
Due to the browser's limitation, the video will only auto-play on desktop browsers, so make sure to add an image to the tablet and mobile section background.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us