HTML背景视频宽高比

Z时代
2024-01-10
分类：问答

所以我试图在Wordpress中使用全屏背景视频与二十二主题。当我在全屏显示器或笔记本电脑后面时，一切正常。但是，只要我放弃我的可信赖的16/9分辨率&使用标准屏幕，视频的宽高比就会混淆整个事情（背景不会横跨整个页面，而是以空白为中心上面和下面的视频），虽然我已经尝试了书中所有的招数 - 最大高度，高度：汽车等HTML背景视频宽高比

我的HTML：

<video autoplay loop poster="wp-content/themes/murastekylaselts/video.jpg" id="bgvid" muted="muted "> 
<source src="wp-content/themes/murastekylaselts/video/video.webm" type="video/webm"> 
<source src="wp-content/themes/murastekylaselts/video/video.mp4" type="video/mp4"> 
</video>

我的CSS：

video#bgvid { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    z-index: -100; 
    -webkit-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%); 
    background: url(video.jpg) no-repeat; 
    background-size: cover; 
}

您可以浏览网页直播@http://muff1n.eu/muraste

谢谢！

回答：

将它包装在一个带有此处描述的视频容器类的div中：http://webdesignerwall.com/tutorials/css-elastic-videos。

.video-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 30px; 
    height: 0; 
    overflow: hidden; 
} 
.video-container iframe, 
.video-container object, 
.video-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 
<div class="video-container"> // could also be <body class="video-container"> 
    <video autoplay loop poster="wp-content/themes/murastekylaselts/video.jpg" id="bgvid" muted="muted "> 
    <source src="wp-content/themes/murastekylaselts/video/video.webm" type="video/webm"> 
    <source src="wp-content/themes/murastekylaselts/video/video.mp4" type="video/mp4"> 
    </video> 
</div>