Maintaining a videos aspect ratio in a responsive layout - html

Question

I'm trying to maintain a videos aspect ratio in a responsive layout to prevent black edges when the layout changes size. So far, I've set up some media queries, but while re-sizing there are still some points that the video has black edges.
You can see the layout and video here http://smedia.lv/ (the SHOWREEL video).
The video is embedded from Vimeo with an iframe and it has a width and height of 100%. The video container width depends on the screen size and is also defined in %, the height is a fixed value.
How can I keep the aspect ratio of the video, so it doesn't have the black edges?

Answer 1

What you want is fluid width video.
Adding just a few styles to your container (.video) and the iframe will accomplish this.
.video {
height: 410px;
width: 964.71px;
margin: 0 auto;
}
iframe {
width: 100%;
height: 100%;
}
/* Adjust the max-width depending on the other styles on your site. */
#media(max-width: 1046px) {
.video {
position: relative;
/* 40:17 aspect ratio */
padding-bottom: 42.5%;
height: 0;
width: auto;
}
iframe {
position: absolute;
top: 0;
left: 0;
}
}
Checkout the example below.
Note:
You can use a media query to setup a breakpoint at which point the video will grow no bigger than 964.71x410.
You will need to update the padding-bottom, .video width, and media query to reflect the correct aspect ratio of your video if it changes.
.video {
height: 410px;
width: 964.71px;
margin: 0 auto;
}
iframe {
width: 100%;
height: 100%;
}
#media(max-width: 1046px) {
.video {
position: relative;
/* 40:17 aspect ratio */
padding-bottom: 42.5%;
height: 0;
width: auto;
}
iframe {
position: absolute;
top: 0;
left: 0;
}
}
<div class="video">
<iframe src="https://player.vimeo.com/video/120261170" width="500" height="213" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>