Video Background for Unbounce LP (e.g. 404 page on Magento)

Now we are able to set a video as main background/full width fixed block background/block background. You need to copy the code below and put it into Unbounce LP JavaScript section (bottom in Editor)

<script>
    // Youtube Video Background for Unbounce. V1.3.5
    // lpVideoBG('#SectionID', 'YoutubeVideoID', width, height, muted);
     function lpVideoBG(e, t, o, i, a) {
        function n() {
            var t = $(e).width(), a = $(e).height();
            "#lp-pom-root" == e && (a = $(window).height());
            var n = t / o, r = i * n;
            if (a >= r) {
                var l = a / r;
                r = a * l
            }
            var p = r / i, c = o * p, y = (c - t) / 2, u = (r - a) / 2;
            $("#" + d)[0].setAttribute("height", r), $("#" + d)[0].setAttribute("width", c), $("#" + d).css({
                top: -u,
                left: -y,
                position: s
            })
        }
        var r = navigator.userAgent.match(/(Android|iPod|iPhone|iPad|iemobile|blackberry)/), d = "framedVideo-" + e.substr(1), l = e, s = "fixed";
        "#lp-pom-root" !== e && (l = e + " .lp-pom-block-content", s = "absolute"), $(l).css({
            width: "100%",
            "margin-left": "0",
            overflow: "hidden"
         });
        var p = "block";
        r && (p = "none");
        var c = '<div style="height:100%;width:100%;position:absolute; top:0px"><iframe id="' + d + '" width="100%" height="100%" src="//www.youtube.com/embed/' + t + "?autoplay=1&controls=0&iv_load_policy=3&disablekb=1&fs=0&loop=1&modestbranding=1&rel=0&showinfo=0&playlist=" + t + '&enablejsapi=1" frameborder="0" allowfullscreen style="display:' + p + '; visibility:hidden; "></iframe></div>', y = '<div style="height:100%;width:100%;position:absolute; top:0px"></div>';
        "#lp-pom-root" === e ? ($(l).prepend(y), $(l).prepend(c)) : ($(l).append(c), $(l).append(y), $(e + "-color-overlay").appendTo(l)), n(), $(window).resize(function () {
            n()
        });
        var u = onPlayerReady;
        onPlayerReady = function (e) {
            u(e), h.setLoop(!0), 1 == a && e.target.mute()
        };
        var f = onChangedState;
        onChangedState = function (e) {
            f(e), e.data == YT.PlayerState.PLAYING ? document.getElementById(d).style.visibility = "visible" : e.data == YT.PlayerState.ENDED && (document.getElementById(d).style.visibility = "hidden")
        };
        var h, m = onYouTubeIframeAPIReady;
        onYouTubeIframeAPIReady = function () {
            m(), h = new YT.Player(d, {loop: "1", events: {onReady: onPlayerReady, onStateChange: onChangedState}})
        }
    }
    function onYouTubeIframeAPIReady() {
    }
    function onPlayerReady() {
    }
    function onChangedState() {
    }
    var tag = document.createElement("script");
    tag.src = "//www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
</script>


To use the FULL PAGE video background please put this code before function lpVideoBG(e, t, o, i, a) {

lpVideoBG('#lp-pom-root', 'kldC5fGUFdY', 560, 315, 1);

 

 

To use the video background for a specific block/section please put this code before function lpVideoBG(e, t, o, i, a) {

 

lpVideoBG('#lp-pom-block-16', 'kldC5fGUFdY', 560, 315, 1);


where #lp-pom-block-16 is a Block ID 

 

'kldC5fGUFdY' – Youtube video code

560 – Width

315 – Height

1/0 – muted off/on

 


Fixed width/height background

Full width/fixed height background

To use this feature please Enable\Disable this option (e.g. screenshot)