Video backgrounds on websites....

#video_background {
position: absolute;
background:#EE595A;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
}

<div id="container">
    <video autoplay loop muted>
        <source src="video.mp4" type="video/mp4">
        <source src="video.webm" type="video/webm">
    </video>
    <div class="content">
        
    </div>
</div>

#container {
    position: relative;
    overflow: hidden;
}
#container .content {
    position: absolute;
    top: 0;
    left: 0;
}

$(function() {
    
    // IE detect
    function iedetect(v) {

        var r = RegExp('msie' + (!isNaN(v) ? ('\\s' + v) : ''), 'i');
        return r.test(navigator.userAgent);
            
    }

    // For mobile screens, just show an image called 'poster.jpg'. Mobile
    // screens don't support autoplaying videos, or for IE.
    if(screen.width < 800 || iedetect(8) || iedetect(7) || 'ontouchstart' in window) {
    
        (adjSize = function() { // Create function called adjSize
            
            $width = $(window).width(); // Width of the screen
            $height = $(window).height(); // Height of the screen
            
            // Resize image accordingly
            $('#container').css({
                'background-image' : 'url(poster.jpg)', 
                'background-size' : 'cover', 
                'width' : $width+'px', 
                'height' : $height+'px'
            });
            
            // Hide video
            $('video').hide();
            
        })(); // Run instantly
        
        // Run on resize too
        $(window).resize(adjSize);
    }
    else {

        // Wait until the video meta data has loaded
        $('#container video').on('loadedmetadata', function() {
            
            var $width, $height, // Width and height of screen
                $vidwidth = this.videoWidth, // Width of video (actual width)
                $vidheight = this.videoHeight, // Height of video (actual height)
                $aspectRatio = $vidwidth / $vidheight; // The ratio the video's height and width are in
                        
            (adjSize = function() { // Create function called adjSize
                            
                $width = $(window).width(); // Width of the screen
                $height = $(window).height(); // Height of the screen
                            
                $boxRatio = $width / $height; // The ratio the screen is in
                            
                $adjRatio = $aspectRatio / $boxRatio; // The ratio of the video divided by the screen size
                            
                // Set the container to be the width and height of the screen
                $('#container').css({'width' : $width+'px', 'height' : $height+'px'}); 
                            
                if($boxRatio < $aspectRatio) { // If the screen ratio is less than the aspect ratio..
                    // Set the width of the video to the screen size multiplied by $adjRatio
                    $vid = $('#container video').css({'width' : $width*$adjRatio+'px'}); 
                } else {
                    // Else just set the video to the width of the screen/container
                    $vid = $('#container video').css({'width' : $width+'px'});
                }
                                 
            })(); // Run function immediately
                        
            // Run function also on window resize.
            $(window).resize(adjSize);
                        
        });
    }
    
});