Dynamic width scale of container based on browser window height (video iframe)

I've been trying to figure this out with css for quite a while now and just can't seem to figure it out. I'm not sure its an html, css or javascript solution.

What I'm trying to do is have a vimeo iframe embed, wrapped in a container with a max-width and a max-height. If on lower monitor resolutions, the height of the browser window is less than the max-height, then I would like the width of the container to scale to fit the video (no bars on left/right side of the video).

I hope that makes sense, if not, I made a short video for what I'm trying to accomplish:


Any help would be greatly appreciated.

Here is my CSS and HTML:

#main-wrap {
position: relative;
margin: 0 auto;
width: 100%;
max-width: 1300px;
height: 100%;
max-height: 731px;
box-shadow: 0 5px 50px #000;
}

#main-wrap iframe {
position: relative;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: yellow;
}

<div id=main-wrap>
<iframe src="https://player.vimeo.com/video/81400335?autoplay=1&muted=1" frameborder=“0” allowfullscreen allow=autoplay></iframe>
</div>

 

Since you aren't ACTUALLY positioning anything, you aren't doing a single blasted thing to warrant the use of the extra DIV or 90%+ of that CSS. I'd also drop the frameborder since to be frank, f*** IE9/earlier.

Though I suspect what you really want to do and why you have the DIV is to position:absolute the iframe to maintain aspect ratio at larger sizes? That's what I'd be doing.

<div class="video_16x9">
	<iframe
		src="https://player.vimeo.com/video/81400335?autoplay=1&muted=1"
		allowfullscreen
		allow="autoplay"
	></iframe>
</div>

Code (markup):

.video_16x9 {
	position:relative;
	overflow:hidden; /* chop off excess */
	max-height:1vh; /* view-port height */
}

.video_16x9:before {
	content:"";
	display:block;
	width:100%;
	height:0;
	padding-bottom:56.25%;
	/*
		Use 62.5% for 16:10. If there is an extra fixed height for
		play controls, set it on padding-top or height!
	*/
}

.video_16x9 video,
.video_16x9 object,
.video_16x9 iframe { /* just covering all bases */
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border:0;
}

Code (markup):

Barring any typo's (drive-by post) that should do the job. Mind you older browsers don't know vh, but really with modern video playback slowly phasing out pre HTML-5 browsers, I consider that a non-issue. People who refuse to join us in THIS decade (which is almost over) should be used to little things being broken for them.

the big trick is that by absolute positioning our frame/video/object (whichever you prefer) it is removed from flow, not reporting it's height. Setting 0 height to the DIV and then applying padding creates our aspect ratio, since percentage padding is based on the WIDTH of the element not height or font-size.

So for 16:9 video, 9/16ths == 0.5625 == 56.25%. "Simple".

oh, and if you want the yellow to show around the video's aspect if it gets shrunk, put it on the DIV, not the frame.

-- edit -- my bad. Min-height doesn't like to cut off padding in all browsers, so I made a generated content element to set the height for when it's smaller than the viewport, then use overflow:hidden to chop it off when it is. Should work. Technically being a block element we shouldn't have to say width:100%, but sadly SOME browsers won't do the percentage height trick without an explicit width declaration.