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 27 英寸也有响应？ （我正在使用引导程序）

Answer 1

这将使您顺利到达那里：http://alistapart.com/article/creating-intrinsic-ratios-for-video

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