html - 添加视频折叠设计

Question

我的 HTML 页面中有一个高度为 500px; 的部分。在该部分的中心有显示一些文本的 Div。现在根据我的要求我必须添加视频作为本节的背景，视频应在背景中播放，宽度为 100%，高度为 500 像素，文本应显示在播放视频的顶部。

但是在添加视频时，我的设计开始折叠。我的文本显示高度超过 500 像素，视频显示从主要部分开始向下约 250 像素。

这是我的视频 HTML>。

 <div class="auto-resizable-iframe">
    <div>
        <iframe frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/_OBlgSz8sSM"></iframe>
    </div>
</div>

这是我的 fiddle 链接 Fiddle .请帮助我，我为此苦苦挣扎了很长时间.. 提前致谢..

Answer 1

我更改了你的 css，宽度应该从 max-width 更改为 min-width http://jsfiddle.net/nq8sa2kw/2/但问题是它使视频无法点击你必须自己弄清楚一些东西

.auto-resizable-iframe {
position:absolute;
min-width: 100%;
margin: 0px auto;
}