Fluid width of container based on fluid height percentage (iframe aspect ratio?)
I've been trying to figure this out with css for quite a while now and just can't seem to figure it out. So I'm thinking maybe it's a solution for jQuery.
What I'm trying to do is have a vimeo iframe embed horizontally centered that keeps it's aspect ratio based on the height. So I want the width to be fluid based on the height. But the height is also fluid to some extent: Height:100%; Max-Height: 731px;
I want to have a box shadow around the video, but with no bars, hence the need for the proper aspect to fluidly change. Also, the reason I would like it to be based on height is because I would like the video to be full screen (height wise) for smaller monitor resolutions, with max height being 731px for larger resolutions;
This is what I have so far in CSS. Any help would be greatly appreciated.
#main-wrap {
position:relative;
margin:0 auto;
width: 100%;
max-width:1300px;
height:100%;
max-height: 731px;
box-shadow:0 5px 50px #000;
top: 50%;
transform: translateY(-50%);
}
#main-wrap iframe {
position:relative;
margin:0;
padding:0;
width:100%;
height:100%;
background:none;
}