StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<h2>Aspect ratio of the viewport</h2> <p>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.</p> <p>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.</p> <p>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.</p> <ul> <li>If the viewport is proportionally wider than the video, use the width.</li> <li>If the viewport is proportionally taller than the video, use the height.</li> </ul> <p><strong>jQuery</strong></p> <pre><code>// 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(); }); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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