使用YouTube视频作为背景，而不是100%宽度包装器

Question

我想使用youtube视频作为容器块的背景。这个容器块不是 100vw，所以我想我需要一种与经典方法不同的方法。因此，我在这里尝试了那个：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;
}

因此，带有该代码的 html 代码：

<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>

但是我现在确实遇到了无法将视频 100% 适合容器的问题，就像背景大小：封面一样; 会做。视频需要哪些值- 集装箱高度100%- 按比例正确缩放宽度- 对齐左上，没有任何黑色背景- 因此，由于大多数设备尺寸，视频宽度将被裁剪。

感谢您的回答！

Answer 1

在 CSS 中添加以下内容：

iframe{
    width: 100% !important;
    height: 100% !important;
}