I have a responsive design site with a HTML5 video that takes up the full browser width. The video's CSS has width:100%;height:auto; which keeps the video resolution ratio no matter the size of the browser window.

The issue I would like to solve is to adjust the height of the <video>'s parent div while keeping the parent div's width:100% so the parent is always the same ratio as the <video> on initial load and resize.

The video is 640x360. Let's say the browser window is 1280x800. The video resolution will double in size to 1280x720 to fit it's 100% width, but the parent div will have 80 more pixels height because of the window's 800 height. I'd like to adjust the height of that div to 720 to match the <video>.

I'm still learning JS and don't have the savvy to solve this. Thanks in advance.

Here is a fiddle that may help with my explanation (Resize the window to replicate the issue. The goal is to not have any red background showing when resizing the window): /

I have a responsive design site with a HTML5 video that takes up the full browser width. The video's CSS has width:100%;height:auto; which keeps the video resolution ratio no matter the size of the browser window.

The issue I would like to solve is to adjust the height of the <video>'s parent div while keeping the parent div's width:100% so the parent is always the same ratio as the <video> on initial load and resize.

The video is 640x360. Let's say the browser window is 1280x800. The video resolution will double in size to 1280x720 to fit it's 100% width, but the parent div will have 80 more pixels height because of the window's 800 height. I'd like to adjust the height of that div to 720 to match the <video>.

I'm still learning JS and don't have the savvy to solve this. Thanks in advance.

Here is a fiddle that may help with my explanation (Resize the window to replicate the issue. The goal is to not have any red background showing when resizing the window): http://jsfiddle/alanweibel/UMstP/2/

• javascript
• jquery
• html
• dom
• html5-video

Share Improve this question Follow asked Nov 25, 2012 at 20:16 Alan WeibelAlan Weibel 39233 silver badges1111 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Assuming I've understood you correctly, this article describes a little trick you could use to make this happen without Javascript: http://webdesignerwall./tutorials/css-elastic-videos

You can calculate a padding for a container if you know the ratio of the video and then position the video absolutely within. I’ve adjusted your fiddle to use this technique: http://jsfiddle/SeykC/

<div class="wrap">
    <div class="container">
        <video id="video" controls="controls">
            <source type="video/mp4"
                    src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" />
        </video>
    </div>           
</div>
​

video {
    max-width: 100%;
    height: auto;
}

.container {
    background: red;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.container iframe,  
.container object,  
.container embed,
.container video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}​