Fullscreen video in background

Question

Good day. I have tried to find a way to apply the full screen video in the background like on this page here: spotify. I assume it can be done in HTML5, however I am trying to follow some instructions from stackoverflow and it doesn't work for me. Obviously I don't want the timeline and other controls on the video, just simple plain video in the background. So far I was trying to use this:

jsFiddles underneath the code

<style>
    #body{position:absolute; width:100%; height:100%}
    #myvideo{position:relative; top:0; left:0; width:100%; height:100%; z-index:-999;}
    #fullpage{width:80%; margin:0 auto; background-color:#900; z-index:100;}

</style>


<video width="100%" height="100%" autoplay="autoplay" id="myvideo">
  <source src="http://www.pete.dj/video/video.webm"></source>
  <source src="http://www.pete.dj/video/video.mp4"></source>
</video>


<script language="javascript">
var elem = document.getElementById("myvideo");
if (elem.requestFullscreen) {
  elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) {
  elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
  elem.webkitRequestFullscreen();
}
</script>


<div id="fullpage">
    content goes here
</div>

but it didn't work well. Here is what is wrong:

video plays full height, doesn't being stretched or resized to cover the whole width of the screen
video plays OK on chrome, but it doesn't on other browsers, what could be the reason? I thought html5 allows to play on all browsers. I've got a feeling it's not a matter of codecs or the files itself. Can it be caused by coding? jsFiddle here: fiddle1

after I've managed to fix the issue with width of the video - then it doesn't act like a background, as scrollbars appeared. What can I do to get rid of scrollbars caused by video? I want them only if the actual #fullpage requires it. Unfortunately also #fullpage is behind the background in this case... instead of on top of it here is a fiddle for this one: fiddle2

the actual website here: video test

Thank you for your help and time.

score 2 · Accepted Answer · answered Aug 30 '13 at 19:54

ok, that's what should do the job. It may be useful for someone in future.:

(function( $ ){

    $.fn.videoBG = function( selector, options ) { 

        var options = {};
        if (typeof selector == "object") {
            options = $.extend({}, $.fn.videoBG.defaults, selector);
        }
        else if (!selector) {
            options = $.fn.videoBG.defaults;
        }
        else {
            return $(selector).videoBG(options);        
        }

        var container = $(this);

        // check if elements available otherwise it will cause issues
        if (!container.length)
            return;

        // container to be at least relative
        if (container.css('position') == 'static' || !container.css('position'))
            container.css('position','relative');

        // we need a width
        if (options.width == 0)
            options.width = container.width();

        // we need a height
        if (options.height == 0)
            options.height = container.height();    

        // get the wrapper
        var wrap = $.fn.videoBG.wrapper();
        wrap.height(options.height)
            .width(options.width);

        // if is a text replacement
        if (options.textReplacement) {

            // force sizes
            options.scale = true;

            // set sizes and forcing text out
            container.width(options.width)
                .height(options.height)
                .css('text-indent','-9999px');
        }
        else {

            // set the wrapper above the video
            wrap.css('z-index',options.zIndex+1);
        }

        // move the contents into the wrapper
        wrap.html(container.clone(true));

        // get the video
        var video = $.fn.videoBG.video(options);

        // if we are forcing width / height
        if (options.scale) {

            // overlay wrapper
            wrap.height(options.height)
                .width(options.width);

            // video
            video.height(options.height)
                .width(options.width);
        }

        // add it all to the container
        container.html(wrap);
        container.append(video);

        return video.find("video")[0];
    }

    // set to fullscreen
    $.fn.videoBG.setFullscreen = function($el) {
        var windowWidth = $(window).width(),
            windowHeight = $(window).height();

        $el.css('min-height',0).css('min-width',0);
        $el.parent().width(windowWidth).height(windowHeight);
        // if by width 
        if (windowWidth / windowHeight > $el.aspectRatio) {
            $el.width(windowWidth).height('auto');
            // shift the element up
            var height = $el.height();
            var shift = (height - windowHeight) / 2;
            if (shift < 0) shift = 0;
            $el.css("top",-shift);
        } else {
            $el.width('auto').height(windowHeight);         
            // shift the element left
            var width = $el.width();
            var shift = (width - windowWidth) / 2;
            if (shift < 0) shift = 0;
            $el.css("left",-shift);

            // this is a hack mainly due to the iphone
            if (shift === 0) {
                var t = setTimeout(function() {
                    $.fn.videoBG.setFullscreen($el);
                },500);
            }
        }

        $('body > .videoBG_wrapper').width(windowWidth).height(windowHeight);

    }

    // get the formatted video element
    $.fn.videoBG.video = function(options) {

        $('html, body').scrollTop(-1);

        // video container
        var $div = $('<div/>');
        $div.addClass('videoBG')
            .css('position',options.position)
            .css('z-index',options.zIndex)
            .css('top',0)
            .css('left',0)
            .css('height',options.height)
            .css('width',options.width)
            .css('opacity',options.opacity)
            .css('overflow','hidden');

        // video element
        var $video = $('<video/>');
        $video.css('position','absolute')
            .css('z-index',options.zIndex)
            .attr('poster',options.poster)
            .css('top',0)
            .css('left',0)
            .css('min-width','100%')
            .css('min-height','100%');

        if (options.autoplay) {
            $video.attr('autoplay',options.autoplay);
        }

        // if fullscreen
        if (options.fullscreen) {
            $video.bind('canplay',function() {
                // set the aspect ratio
                $video.aspectRatio = $video.width() / $video.height();
                $.fn.videoBG.setFullscreen($video);
            })

            // listen out for screenresize
            var resizeTimeout;
            $(window).resize(function() {
                clearTimeout(resizeTimeout);
                resizeTimeout = setTimeout(function() {
                    $.fn.videoBG.setFullscreen($video);
                },100); 
            });
            $.fn.videoBG.setFullscreen($video);
        }


        // video standard element
        var v = $video[0];

        // if meant to loop
        if (options.loop) {
            loops_left = options.loop;

            // cant use the loop attribute as firefox doesnt support it
            $video.bind('ended', function(){

                // if we have some loops to throw
                if (loops_left)
                    // replay that bad boy
                    v.play();

                // if not forever
                if (loops_left !== true)
                    // one less loop
                    loops_left--;
            });
        }

        // when can play, play
        $video.bind('canplay', function(){

            if (options.autoplay)
                // replay that bad boy
                v.play();

        });


        // if supports video
        if ($.fn.videoBG.supportsVideo()) {

            // supports webm
            if ($.fn.videoBG.supportType('webm')){

                // play webm
                $video.attr('src',options.webm);
            }
            // supports mp4
            else if ($.fn.videoBG.supportType('mp4')) {     

                // play mp4
                $video.attr('src',options.mp4);

            //  $video.html('<source src="'.options.mp4.'" />');

            }
            // throw ogv at it then
            else {

                // play ogv
                $video.attr('src',options.ogv);
            }

        }



        // image for those that dont support the video  
        var $img = $('<img/>');
        $img.attr('src',options.poster)
            .css('position','absolute')
            .css('z-index',options.zIndex)
            .css('top',0)
            .css('left',0)
            .css('min-width','100%')
            .css('min-height','100%');

        // add the image to the video
        // if suuports video
        if ($.fn.videoBG.supportsVideo()) {
            // add the video to the wrapper
            $div.html($video);
        }

        // nope - whoa old skool
        else {

            // add the image instead
            $div.html($img);
        }

        // if text replacement
        if (options.textReplacement) {

            // force the heights and widths
            $div.css('min-height',1).css('min-width',1);
            $video.css('min-height',1).css('min-width',1);
            $img.css('min-height',1).css('min-width',1);

            $div.height(options.height).width(options.width);
            $video.height(options.height).width(options.width);
            $img.height(options.height).width(options.width);   
        }

        if ($.fn.videoBG.supportsVideo()) {
            v.play();
        }
        return $div;
    }

    // check if suuports video
    $.fn.videoBG.supportsVideo = function() {
        return (document.createElement('video').canPlayType);
    }

    // check which type is supported
    $.fn.videoBG.supportType = function(str) {

        // if not at all supported
        if (!$.fn.videoBG.supportsVideo())
            return false;

        // create video
        var v = document.createElement('video');

        // check which?
        switch (str) {
            case 'webm' :
                return (v.canPlayType('video/webm; codecs="vp8, vorbis"'));
                break;
            case 'mp4' :
                return (v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'));
                break;
            case 'ogv' :
                return (v.canPlayType('video/ogg; codecs="theora, vorbis"'));
                break;          
        }
        // nope
        return false;   
    }

    // get the overlay wrapper
    $.fn.videoBG.wrapper = function() {
        var $wrap = $('<div/>');
        $wrap.addClass('videoBG_wrapper')
            .css('position','absolute')
            .css('top',0)
            .css('left',0);
        return $wrap;
    }

    // these are the defaults
    $.fn.videoBG.defaults = {
            mp4:'',
            ogv:'',
            webm:'',
            poster:'',
            autoplay:true,
            loop:true,
            scale:false,
            position:"absolute",
            opacity:1,
            textReplacement:false,
            zIndex:0,
            width:0,
            height:0,
            fullscreen:false,
            imgFallback:true
        }

})( jQuery );



$(document).ready(function() {


    $('body').videoBG({
        position:"fixed",
        zIndex:0,
        mp4:'http://www.pete.dj/video/video.mp4',
        ogv:'http://www.pete.dj/video/video.ogv',
        webm:'http://www.pete.dj/video/video.webm',
        poster:'http://www.pete.dj/video/video.jpg',
        opacity:1,
        fullscreen:true,
    });

})

jfiddle here: jfiddle

Thank you Piotr, I really appreciate it. I was going to use BigVideo, but then I found this. +1 — user1632018, Dec 15 '13 at 05:44
@user1632018 you're welcome. I'm glad it was helpful for someone — Piotr Ciszewski, Sep 28 '15 at 22:56

score 0 · Answer 2 · answered Aug 30 '13 at 13:29

0

body{margin:0;}

I guess this is the CSS snippet you are looking for.

answered Aug 30 '13 at 13:29

thanks, but this is not the one. the first fiddle presents the video almost perfect apart from these two facts: 1. it's not full screen as it fills just 100% height, not both height and width 2. its not working on anything else than chrome for some reason. – Piotr Ciszewski Aug 30 '13 at 13:37
Ah sorry i forgot the crossbrowser stuff. – Aug 30 '13 at 13:46
So it seems that the video tags width and height does not support percentage, only pixel, so the video actually plays on its native size. i had similar problems width flash, my only solution yet is to stretch it from javascript to the actual size of the page in pixels. – Aug 30 '13 at 13:52
hmmm, how to do that? – Piotr Ciszewski Aug 30 '13 at 14:10
I have managed to do this: http://jsfiddle.net/tucado/SSf5F/2/ which still has scrollbar caused by the background + doesn't work on other browsers than chrome... unfortunately – Piotr Ciszewski Aug 30 '13 at 14:14
but, no... if you resize it to smaller size - the video doesn't fill the bottom of the page – Piotr Ciszewski Aug 30 '13 at 14:15

score 0 · Answer 3 · answered Aug 30 '13 at 14:19

0

basicly you can listen to the window.onresize event and then smth like:

var elem = document.getElementById("myvideo");

elem.width = window.innerWidth;
elem.height = window.innerHeight;

window.onresize=function(){
    elem.width = window.innerWidth;
    elem.height = window.innerHeight;
};

answered Aug 30 '13 at 14:19

thanks @derylius, but it still doesn't work. Following that post the jsfiddle here: http://jsfiddle.net/tucado/erX2t/ – Piotr Ciszewski Aug 30 '13 at 17:14
http://stackoverflow.com/questions/4000818/scale-html5-video-and-break-aspect-ratio-to-fill-whole-site also this one might help – Sep 13 '13 at 07:00

Fullscreen video in background

3 Answers3