html - div 中的背景视频完全响应

Question

我正在搜索将视频放在 div(联系人和页脚 div)的背景中。它在我的全屏上工作，但在移动设备上不行。

我的 html 是:

<div class="header-unit">
    <div id="video-container">
            <video autoplay loop class="fillWidth" >
                    <source src="videos/video_contactme.m4v" type="video/mp4" />
                    Your browser does not support the video tag. I suggest you upgrade your browser.</video>
           <h1>...</h1>
           <p>some contents</p
    </div>
</div>

我的 CSS 是:

    .header-unit {
    height: auto;
    width:100%;
    overflow: hidden;
    position:absolute;
    margin-left:auto;
    margin-right:auto;
}
video {
    position: absolute;
    z-index: 0;
}
video.fillWidth {
    width: 100%;
    min-height: 100%;
}
#video-container {
    width:100%;
    overflow: hidden;
    background-size:cover
}

那么，我怎样才能让它响应移动设备和 imac 27inch 呢？ (我正在使用 Bootstrap )

Answer 1

这将帮助您完成部分工作:http://alistapart.com/article/creating-intrinsic-ratios-for-video

您的主要问题是设备方向。桌面是水平的，纵向移动设备是垂直的……但内在比例会让您更接近获得您正在寻找的比例。