Question

我试图在background-size: cover元素上模拟<video>的功能。我已设法使用以下代码执行此操作：

<video id="videobackground" autoplay="true" loop="true">
    <source src="BackgroundFinal2.mp4" type="video/mp4">
</video>


#videobackground { 
  position: absolute;
  bottom: 0px; 
  right: 0px; 
  min-width: 100%; 
  min-height: 100%; 
  width: auto; 
  height: auto; 
  z-index: -1000; 
  overflow: hidden
}

问题是我还想模拟background-position: center center;的功能，但我不知道如何做到这一点。使用当前代码，如果需要，我的视频将从左侧和顶部切断 - 但我希望它从两侧切割。

请问任何想法/解决方案？谢谢！

Answer 1

免责声明：我只是在尝试使用网络开发（或任何类型的代码/脚本）大约9个月，所以不要认为我的解决方案是没有错误的。有关已知问题，请参阅脚注。

我一直面临着同样的问题，我想我完全理解你在寻找什么。

基本上，无论屏幕宽度/高度如何，视频的水平和垂直边缘都不应进入视口，应保留纵横比，并且视频应垂直和水平居中。

1920x800 分辨率的视频示例：

*（缺少CSS供应商前缀）

<强> HTML

<div class="bg-vid-container">
    <video id="bg-vid" class="cover" poster="lib/img/bg-vid.poster.png" autoplay loop>
        <source src="lib/vid/bg-vid.mp4" type="video/mp4"/>
    </video>
</div>

<强> CSS

.bg-vid-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

video.cover {
    width: 100%;
    min-width: 240vh;
    height: auto;
}

将justify-content和align-items设置为中心的弹性框模型将使视频保持垂直和水平居中，overflow: hidden;停止不必要的滚动。

在这种情况下，min-width设置为240vh（视图高度单位，其中1vh =窗口高度的1％）。这是通过将纵横比缩放到100的高度来计算的（我使用Andrew Hedges'Aspect Ratio Calculator）。

1920x800缩放为 240 x100。

这样可以防止视频的高度降至100％以下，但如果浏览器窗口变宽，则仍允许其宽度为100％，只需增加其高度即可。

根据caniuse.com，弹性盒模型和vh单元都有很好的支持。

这在某些设备上的移动视觉上无法正常工作，键盘向上滑动会调整窗口的大小。我正在研究一个jQuery / CSS媒体查询解决方案。如果它们按预期工作，我会更新结果。 iOS 7对vh的支持也有点粗略。

模拟背景大小：在HTML5 <video> </video>上覆盖中心位置

1 个答案: