Seeking a solution in HTML & CSS to display this embedded video as a 75vh height hero background.
Currently, the iFrame maintains its width: 100% and height: 75vh, but the images themselves do not cover the entire header width.
Essentially, I want it to act like a background-size: cover property would.
Check out this quick jsfiddle link for a visual representation of the issue. Best viewed in a new tab.
PS: I've read numerous articles on this problem, but haven't come across a working solution yet.
body {
background: #aaa;
margin: 0;
padding: 0;
height: 2000px;
}
body {
background: #aaa;
margin: 0;
padding: 0;
height: 2000px;
}
header {
background: #ddd;
height: 75vh;
width: 100%;
}
.video__wrapper {
position: relative; padding-bottom: 53.25%; /* 16:9 */ padding-top: 25px;
}
.video__inner {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
min-height: 100%;
}<body>
<header>
<iframe src="https://www.youtube.com/embed/w7Ap0k7qp2k?autoplay=1&loop=0&rel=0&showinfo=0&controls=0&autohide=1" frameborder="0" class="video__inner"></iframe>
</header>
<main></main>
</body>UPDATE
This post discusses how to utilize only HTML & CSS to effectively "crop" a video to cover the whole viewport.
See a live demonstration with this amazing codepen link
https://codepen.io/cvn/pen/WbXEoX?q=youtube+object+fit&limit=all&type=type-pens