Note that there are some explanatory texts on larger screens.

plurals
  1. POHTML5 background video resizing glitch
    primarykey
    data
    text
    <p>NOTE: This is a follow-up question to <a href="https://stackoverflow.com/questions/11800124/html5-video-set-to-browser-full-screen-same-as-noborder-for-flash-movie">Html5 video set to browser full screen - same as noborder for flash movie</a></p> <p>I've wrapped the accepted answer's code within an event listener, this is the result:</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; body, html { width: 100%; height: 100%; margin: 0; padding: 0; } #container { position: absolute; width: 100%; height: 100%; overflow: hidden; } #player { position: absolute; } &lt;/style&gt; &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(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(); }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="container"&gt; &lt;video id="player" autoplay loop&gt; &lt;source src="background.mp4" type="video/mp4" /&gt; &lt;source src="background.ogv" type="video/ogg" /&gt; &lt;/video&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>When I resize my window <em>vertically</em> I get empty space aside. <img src="https://i.stack.imgur.com/CmrXa.jpg" alt="enter image description here"></p> <p>Any ideas to solve this?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload