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做出响应呢？（我正在使用引导程序）

Answer 1

这将让您了解其中的一部分：http://alistapart.com/article/creating-intrinsic-ratios-for-video

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

div中的背景视频完全响应

1 个答案: