Create fullscreen HTML5 responsive video backgrounds


You may also like...

  • Paweł Ratajczyk

    Thanks, that’s awesome! But how to center the video?

  • Paul Gillespie

    I used the above and thought the same; “how to keep the video centred on resize?”. I used the following jQuery to do this…

    jQuery(document).ready(function() {

    function resize_background() {

    jQuery(“#bg-video”).css(“min-height”, jQuery(window).height() + “px”);

    var video_width = parseInt(jQuery(“#bg-video”).css(“width”));

    var window_width = jQuery(window).width();

    if(video_width > window_width) {

    var left_pos = ((video_width – window_width) / 2) * -1;

    jQuery(“#bg-video”).css(“left”, left_pos + “px”);

    }

    else {

    jQuery(“#bg-video”).css(“left”, 0);

    }

    }

    jQuery(window).resize(function() {

    resize_background();

    });

    resize_background();

    });