我有以下两个部分想要一个接一个地显示。
在第一部分中,我尝试将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%;
}
显示全宽:
答案 0 :(得分:4)
你可以尝试这段代码吗?
<强> DEMO 强>
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>