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

时间:2016-02-22 22:46:10

标签: html5 twitter-bootstrap vimeo

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

在第一部分中,我尝试将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%;
}   

显示全宽:

snapshot of image displayed

1 个答案:

答案 0 :(得分:4)

你可以尝试这段代码吗?

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