Responsive hero with Vimeo background - html

Question

I'm trying to replicate background-size: cover; with a Vimeo video in my website's hero section. I can get the video to sit nicely but it's not scaling down properly on small screens.
Here's what I've got at the moment:
HTML:
<div id="vimeohero">
<iframe src="https://player.vimeo.com/video/319007333?background=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
CSS:
#vimeohero {
height: 300px;
}
iframe {
width: 100vw;
height: 56.25vw; // Given a 16:9 aspect ratio, 9/16*100 = 56.25
min-height: 100vh;
min-width: 177.77vh; // Given a 16:9 aspect ratio, 16/9*100 = 177.77
position: relative;
top: 50%;
left: 50%;
transform: perspective(1px) translate(-50%, -50%);
}
https://jsfiddle.net/a7j0rbmq/1/
When you look at this on a small screen (375px by 812px) the video is zoomed in and not displaying the same as background-size: cover; would.
(Obviously the video will have to zoom in a bit to fill the space but this zooms in more than necessary. If you change the height of your screen to match the height of the div (300px) it displays fine).
If you remove the min-width declaration it almost fixes the problem, however on some screen sizes you get whitespace either side of the video :(

Answer 1

You need to make a few changes on your css to achieve what you are looking for.
Edited: ajusted the height to 300px.
#vimeohero {
background: #eee;
height: 300px;
overflow: hidden;
padding: 0;
position: relative;
}
iframe {
box-sizing: border-box;
height: 56.25vw;
left: 50%;
min-height: 100%;
min-width: 100%;
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
width: 177.77777778vh;
}
<div id="vimeohero">
<iframe src="https://player.vimeo.com/video/319007333?background=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
The snippet dont show the video, see at codepen.
https://codepen.io/flavio-caruso/pen/WBKZqY

Answer 2

#vimeohero {
height: 100vh;
width: 100%;
overflow: hidden;
}
iframe {
width: 100vw;
height: 56.25vw;
min-height: 100vh;
min-width: 177.77vh;
}
*{
padding:0;
margin:0;
}
<div id="vimeohero">
<iframe src="https://player.vimeo.com/video/319007333?background=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
remove padding and margin on all element solve it!