Welcome to the Instapage Support Center


Video Background for Instablocks

Using the following custom coded solution you can add any Youtube video as a video background for any of your page blocks.

The information you will need to set this up on your landing page is the Youtube video ID and the page block on which you would want to have the video background.

How to get the Youtube video ID


The following code needs to be added under Settings - JavaScript, Header:

jQuery(document).ready(function() {
 if ( $(window).width() > 640) {
// Add below the Youtube video ID
    var videoID = "video_ID";
// Add below the number of your section on which you would want to have the video background
    var pageSection = 1;
    var $youtubevid = '<div class="video-background"><div class="video-foreground" id="video-foreground"></div></div>';
    pageSection = pageSection + 1;
    var $sectionID = $('.page-block:nth-of-type(' + pageSection + ')').attr('id');
    $sectionID = '#' + $sectionID;
    player.playVideo('video-foreground', videoID);
    $($sectionID).css({"overflow": "hidden"});
    $($sectionID + ' .border-holder').css({"overflow": "hidden","background": "none"});
    $($sectionID + ' .color-overlay').css({"z-index": "1"});
    $(function() {
        $('.video-foreground').css({width: $(window).innerWidth() + 'px'});
        var dw = 1264;
        $(window).resize(function() {
            var cw = $(window).innerWidth();
            var xw = dw - cw;
            $('.video-foreground').css({width: cw + xw + 'px'});
    var player = {
        playVideo: function(container, videoId) {
            if (typeof(YT) == 'undefined' || typeof(YT.Player) == 'undefined') {
                window.onYouTubeIframeAPIReady = function() {player.loadPlayer(container, videoId);};
            } else {player.loadPlayer(container, videoId);}
        loadPlayer: function(container, videoId) {
            new YT.Player(container, {
                videoId: videoId,
                playerVars: {
                    autoplay: 1,
                    controls: 0,
                    showinfo: 0,
                    modestbranding: 1,
                    loop: 1,
                    playlist: videoId,
                    fs: 0,
                    cc_load_policy: 0,
                    iv_load_policy: 3,
                    autohide: 1
                events: {
                    onReady: function(e) {e.target.mute();}

Now you will need to add your own Youtube video ID in the videoID parameter


And the page block on which you want to have the video background


In the example above, we are adding the video background to the first block of the page from the top. If you want to add it to the second block, you will need to replace 1 with 2, and so on if you want to add it to any other block.

The next step is to add the CSS styling for this feature, the code below needs to be added under Settings - HTML/CSS - Header

@media only screen and (max-width: 640px){
display: none;
} @media only screen and (min-width: 640px){ .video-background { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .video-foreground, .video-background iframe { position: absolute; pointer-events: none; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; transform: translateX(-50%) translateY(-50%); background-size: cover; transition: 1s opacity; height: calc(100vh + 150px); width: 100%; } } </style>

 Note: The video background will not be available on mobile devices or mobile screen sizes.

Have more questions? Submit a request
Was this article helpful?
13 out of 20 found this helpful

Need Further Help?

Tell us what you need and we will be happy to assist you.

Our team of expert support staff and our community can answer your questions. Submit a ticket, or reach out on live chat!