CODEWITHSUNDEEP
javascriptresponsive-designhtml5-video
Davide Valdo
Davide Valdo

Reputation: 779

HTML5 background video resizing glitch

NOTE: This is a follow-up question to Html5 video set to browser full screen - same as noborder for flash movie

I've wrapped the accepted answer's code within an event listener, this is the result:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body, html {
                width: 100%;
                height: 100%;

                margin: 0;
                padding: 0;
            }

            #container { 
                position: absolute; 
                width: 100%; 
                height: 100%; 
                overflow: hidden; 
            }

            #player { 
                position: absolute; 
            }
        </style>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>

        <script type="text/javascript">
            $(window).load(function () {
                adjust = function () {
                    var $player = $('#player');
                    var $window = $(window);

                    $player[0].height = $window.height(); 

                    $player.css('left', (($window.width() - $player.width()) / 2) + "px");
                };

                adjust();

                $(window).resize(function () {
                    adjust();
                });
            });
        </script>
    </head>
    <body>
        <div id="container">
              <video id="player" autoplay loop>
                    <source src="background.mp4" type="video/mp4" />
                    <source src="background.ogv" type="video/ogg" />
              </video>
        </div>
    </body>
</html>

When I resize my window vertically I get empty space aside. enter image description here

Any ideas to solve this?

Upvotes: 2

Views: 2172

Answers (2)

Matt Coughlin
Matt Coughlin

Reputation: 18906

Aspect ratio of the viewport

If you always set the height of the video to the height of the viewport, then anytime the viewport is very wide and very short (as in the screenshot above), there will be unused space on the left and right.

Conversely, if you always set the width of the video to the width of the viewport, then anytime the viewport is very narrow and very tall (the opposite of the screenshot above), there will be unused space on the top or bottom.

To make the video always entirely fill the viewport, the trick is to know, at any given time, whether it's better to use the width or the height. That depends on the aspect ratio of the video, versus the aspect ratio of the viewport.

  • If the viewport is proportionally wider than the video, use the width.
  • If the viewport is proportionally taller than the video, use the height.

jQuery

// Set this variable when the page first loads
var videoAspectRatio;

function adjust() {
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();
    var viewportAspectRatio = viewportWidth / viewportHeight;

    if (viewportAspectRatio > videoAspectRatio) {

        // Very-wide viewport, so use the width
        $player.css({width: viewportWidth + 'px', height: 'auto'});

        // Position the video as needed
        // ...
    }
    else {
        // Very-tall viewport, so use the height
        $player.css({width: 'auto', height: viewportHeight + 'px'});

        // Position the video as needed
        // ...
    }
}

$(document).ready(function(){
    // Get the aspect ratio of the video
    videoAspectRatio = $player.width() / $player.height();
    adjust();
});

$(window).resize(function(){ adjust(); });

Upvotes: 2

Jefferson
Jefferson

Reputation: 991

Try putting your width and height to auto, and adding min-width/height.

Edit: Nevermind. You shouldn't be styling your #container. Instead, style your video.

#player { 
      min-width: 100%; 
      min-height: 100%; 
      width: auto; 
      height: auto; 
      position: absolute; 
      overflow: hidden; 
}

Make sure your #container is the size you want your video to spawn.

Upvotes: 1

Related Questions