Question

我想使用youtube-video作为容器块的背景。这个容器块不是100vw，所以我想我需要一种与经典方法不同的方法。因此，我在这里尝试了一个：https://codepen.io/daiaiai/pen/ygeyLG使用＆＃34;代码＆＃34;：

$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;
}

在非100％宽度的包装上使用youtube-video作为背景

1 个答案: