Question

所以我试图在Wordpress中使用带有Twenty Twelve主题的全屏背景视频。当我在全屏显示器或笔记本电脑后面时，一切都很完美。

然而，只要我放弃了我可信赖的16/9分辨率＆amp;使用一个标准的屏幕，视频的宽高比混淆整个事物（背景没有在整个页面上拉伸，但是以视频上方和下方的空白为中心），虽然我已经尝试了书中的所有技巧 - max-height，height：auto等。

我的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

查看该页面

谢谢！

Answer 1

使用此处描述的视频容器类将其包装在div中：http://webdesignerwall.com/tutorials/css-elastic-videos。

{{1}}

Answer 2

唉，这篇文章为我提供了解决方案 - fvsch.com/code/video-background谢谢你，Beau！

HTML背景视频宽高比

2 个答案: