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

我试图在<video>元素上模拟background-size: cover的功能。我已经成功地做到这一点与此下面的代码：模拟背景大小：在HTML5上覆盖中心位置<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;的功能，我不知道该怎么做。使用当前的代码，如果需要，我的视频将从左侧和顶部切断 - 但是我希望从双侧切断。

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

来源

2014-10-04 user1207524

区区谷歌搜索止跌回升http://demosthenes.info/blog/777/Create-Fullscreen-HTML5-Page-Background-Video用在它上面的一个演示！ – 2014-10-04 21:25:16

这并不能解决我对视频居中的问题。网站上显示的代码与我的相同。它们只将背景图像居中而不是实际的视频。 – user1207524 2014-10-04 21:43:16

你能详细解释一下这个问题吗？您是否尝试在HTML5视频标签顶部显示文字，因为您提到您的网站与Radu提到的网站相同。我在这里更新了CSS，以确保它从顶部开始。 http://jsfiddle.net/seshakiran/ks9kad7f/ – 2014-10-05 00:10:57

免责声明：我一直在试验web开发（或任何类型的代码/脚本）约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可缩放至 x100。

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

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

在移动设备上看到在一些设备中根据需要（但）这不会工作，在键盘上滑动了调整窗口的大小。我正在研究一个jQuery/CSS媒体查询解决方案。如果按预期工作，我会更新结果。 iOS 7对vh的支持也有点粗略。

来源

2015-06-16 06:39:12 udy

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

回答

相关问题