HTML背景视频调整为响应的屏幕大小

我有关于我的HTML背景视频的问题。我在Stack Overflow上找到了一些文章，并将它添加到我的HTML和CSS中。但它似乎不起作用，它要么不会变得敏感，要么会与我的其他divs和元素混淆。HTML背景视频调整为响应的屏幕大小

我有一个画面：（视频元素的容器具有背景色黄色）

这里是代码：

.container { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    box-shadow: 0px 10px 24px 0px rgba(50, 50, 75, 0.49); 
    font-size: 0; 
    background-color: yellow; 
    margin: auto; 
    z-index: -1000; 
} 

.container video { 
    min-width: 100%; 
    min-height: 100%; 

    width: auto; 

    position: absolute; 

    height: auto; 
    max-height: 100%; 
    width: 100%; 
}

正如你所看到的，视频的宽度做不适应屏幕尺寸。我试过object-fit，但这会使它不能响应。

来源

2017-05-03 Ricardo Hagens

诀窍是让你的容器height: 0然后在容器上应用视频的宽高比为padding-bottom。通过将高度除以宽度并乘以100得到百分比值，即可得到视频的宽高比。然后定位您的视频以占据容器中的整个空间。

我的例子中的视频是320x176。（176/320）* 100 = 55％。

* {margin:0;} 
 
.container { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 0; 
 
    overflow: hidden; 
 
    box-shadow: 0px 10px 24px 0px rgba(50, 50, 75, 0.49); 
 
    font-size: 0; 
 
    background-color: yellow; 
 
    margin: auto; 
 
    z-index: -1000; 
 
    padding-bottom: 55%; 
 
} 
 

 
.container video { 
 
    position: absolute; 
 
    top: 0; left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="container"> 
 
    <video src="https://www.w3schools.com/html/mov_bbb.mp4" loop autoplay></video> 
 
</div>

来源

2017-05-03 17:37:27

嘿，谢谢你的回复。我试过了，但它一直在左边和右边显示容器背景（黄色）。我玩过，并做了这样的伎俩，它给我的视频一个css规则的对象适合：填充; –

@RicardoHagens按照你的意愿做我的演示工作吗？ 'object-fit'非常棒，但它的浏览器支持非常差。 –

如果您希望视频总是充满100％的宽度和你的容器，无论比100％的高度，那么你应该用overflow:hidden去，且位置上面玩，如果要将其居中，则使用右侧，底部，左侧属性。

.container .video{ 
    min-width:100%; 
    min-height:100%; 
    overflow:hidden; 
}

来源

2017-05-03 17:40:33

这奏效了，我什么，我需要的用于台式机至少：

.container{ 
    width: auto; 
    height: 100%; 
    position: absolute; 

    bottom: 0px; 
    top: 0px; 
    background-color: yellow; 
    z-index: -1000; 
    overflow: hidden; 
    box-shadow: 0px 10px 24px 0px rgba(50, 50, 75, 0.49); 

    margin: auto; 

    font-size: 0; 
} 


.container video{ 

    min-width: 100%; 
    min-height: 100%; 
    position: static; 
    top: 0; 
    left:0; 
    height: 100%; 
    width: 100%; 
    object-fit: fill; 

    }

移动我会给它一个不同的规则，因为现在更改视频宽高比（我需要）。

来源

2017-05-03 18:38:25

HTML背景视频调整为响应的屏幕大小

回答

相关问题