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 past 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 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 start playing in mute mode.

To add an overlay color to the video simply add the desired color to the section background.

Due to the browsers limitation the video will only auto-play on desktop browsers, so make sure to add an image to tablet and mobile section background.
Was this article helpful?
Cancel
Thank you!