如何在后台响应全宽嵌入 YouTube/Vimeo 视频

Question

我有以下两个部分，我想一个接一个地显示。

在第一部分中，我尝试将 100% x 100% Vimeo 视频设置为背景。

我尝试了一些绝对位置和相对位置设置的组合，但要么我丢失了视频的全宽/高度，要么第二部分叠加在第一个部分上。

我想要的是类似这样的东西：

http://template.ridianur.com/bahe/youtube-background/index.html

<section id='bg-video'>
    <iframe src="https://player.vimeo.com/video/149224063?autoplay=1&color=ff0179&title=0&byline=0&portrait=0" width="780" height="438" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</section>


<section>
    <div class="box">
        <p>lorem ipsum</p>
    </div>
</section>
enter code here

我目前拥有的样式表的相关部分是：

section {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

如果我使用下面的样式表

#bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}

#bg-video iframe {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}   

全宽显示：

Answer 1

你可以试试这个代码吗？

DEMO

ref.

section {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  height: auto;
}
section iframe,
section object,
section embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<section>

  <iframe src="https://player.vimeo.com/video/149224063?autoplay=1&color=ff0179&title=0&byline=0&portrait=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

</section>