Question

嘿大家我一直在弄清楚如何将背景视频聚焦在html中。到目前为止，我花了很多时间才想出任何事情我的代码是

<style>
.videoContainer 
{
    height:100%;
    width:100%;
    overflow: hidden;
    position:relative;
}

.videoContainer video 
{
    min-width: 100%;
    min-height: 100%;    
}
</style>

<div class="videoContainer">
    <video src="movie.mp4" autoplay="true" loop="true" muted="true"></video>
</div>

我一直试图弄清楚如何将全屏视频放在背景上，只需将焦点放在视频中心，同时调整窗口大小，例如：http://urbaninfluence.com/

任何建议都将不胜感激。

Answer 1

更新 - 这是有效的。看下面我的jsfiddle ......

尝试将以下样式添加到.videoContainer视频

.videoContainer 
{
    height:400px;
    width:600px;
    overflow: hidden;
    position:relative;
    border:solid 1px #f00;
}

.videoContainer video 
{
    width: 100%;
    height: 100%;
    min-width:1920px;
    min-height:1080px;
    position:relative;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%);/*For IE9*/
    transform:translate(-50%, -50%);
}

<div class="videoContainer">
    <video src="http://video.blendertestbuilds.de/download.blender.org/peach/trailer_1080p.mov" autoplay="true" loop="true" muted="true"></video>
</div>

在缩放html中调整背景视频大小时设置焦点

1 个答案: