I am trying to set a Youtube video as the background of a container block that is not 100vw. I have attempted using a different approach with the following code snippet: https://codepen.io/daiaiai/pen/ygeyLG
$color_1:rgb(25,29,184);
$color_7:rgb(241,90,111);
* {
vertical-align:top;
box-sizing:border-box;
margin:0;
padding:0;
height:auto;
border:0;
}
.sw_header{
height:92vh;
width:100vw;
overflow-x: hidden;
}
.sw_header-links{
width:40%;
height:100%;
display: inline-block;
background: $color_1;
overflow: hidden;
}
.sw_header-links-videowrapper{
//position: relative;
top: 0;
left: 0;
//width: 100%;
width: 100%;
height:100%;
pointer-events: none;
}
.sw_header-links-videowrapper iframe{
//position: relative;
top: 0;
left: 0;
height: 320%;
width:180%;
//height: 200%;
}
.sw_header-rechts{
display: inline-block;
width:50%;
height:100%;
background:$color_7;
padding:50px;
}
Here is the HTML code for the setup:
<header class="sw_header">
<div class="sw_header-links">
<div class="sw_header-links-videowrapper">
<iframe src="https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="sw_header-rechts">
<h4>The other content <br/> The other contentblock</h4></div>
</header>
However, I am facing an issue where I cannot achieve 100% fit of the video to the container, similar to a background-size:cover; property. Can someone suggest which values should be used for the video to meet the following requirements: - 100% height of the container - Correct scaling of the width while maintaining proportions - Left top alignment without any black backgrounds - Proper cropping of the video's width based on device dimensions.
Thank you for your input!