Html 使用视频作为 div 的背景
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20818881/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
use video as background for div
提问by Knerd
I would like to use a video as background in CSS3. I know that there is no background-video property, but is it possible to do this behavior. Using a fullsize video-tag doesn't give the wanted result, cause there is content that need to be displayed over the video.
我想在 CSS3 中使用视频作为背景。我知道没有 background-video 属性，但是否可以执行此行为。使用全尺寸视频标签不会给出想要的结果，因为需要在视频上显示内容。
It need to be non JS. If it is not possible then I need to do changes on my serverside an give as result also a screenshot of the video.
它必须是非 JS。如果不可能，那么我需要在我的服务器端进行更改，并给出视频的屏幕截图。
I need the video to replace the colored boxes:
我需要视频来替换彩色框：
The colored boxes are atm just, CSS boxes.
彩色框只是 atm，CSS 框。
采纳答案by Zach Saucier
Why not fix a <video>and use z-index:-1to put it behind all other elements?
为什么不修复 a<video>并用于z-index:-1将它放在所有其他元素之后？
html, body { width:100%; height:100%; margin:0; padding:0; }
<div style="position: fixed; top: 0; width: 100%; height: 100%; z-index: -1;">
<video id="video" style="width:100%; height:100%">
....
</video>
</div>
<div class='content'>
....
If you want it within a container you have to add a container element and a little more CSS
如果你想在容器中使用它，你必须添加一个容器元素和更多的 CSS
/* HTML */
<div class='vidContain'>
<div class='vid'>
<video> ... </video>
</div>
<div class='content'> ... The rest of your content ... </div>
</div>
/* CSS */
.vidContain {
width:300px; height:200px;
position:relative;
display:inline-block;
margin:10px;
}
.vid {
position: absolute;
top: 0; left:0;
width: 100%; height: 100%;
z-index: -1;
}
.content {
position:absolute;
top:0; left:0;
background: black;
color:white;
}
回答by marcel_pi
I believe this is what you're looking for. It automatically scaled the video to fit the container.
我相信这就是你要找的。它会自动缩放视频以适合容器。
DEMO: http://jsfiddle.net/t8qhgxuy/
演示：http: //jsfiddle.net/t8qhgxuy/
Video need to have height and width always set to 100% of the parent.
视频需要将高度和宽度始终设置为父级的 100%。
HTML:
HTML：
<div class="one"> CONTENT OVER VIDEO
<video class="video-background" no-controls autoplay src="https://dl.dropboxusercontent.com/u/8974822/cloud-troopers-video.mp4" poster="http://thumb.multicastmedia.com/thumbs/aid/w/h/t1351705158/1571585.jpg"></video>
</div>
<div class="two">
<video class="video-background" no-controls autoplay src="https://dl.dropboxusercontent.com/u/8974822/cloud-troopers-video.mp4" poster="http://thumb.multicastmedia.com/thumbs/aid/w/h/t1351705158/1571585.jpg"></video> CONTENT OVER VIDEO
</div>
CSS:
CSS：
body {
overflow: scroll;
padding: 60px 20px;
}
.one {
width: 90%;
height: 30vw;
overflow: hidden;
border: 15px solid red;
margin-bottom: 40px;
position: relative;
}
.two{
width: 30%;
height: 300px;
overflow: hidden;
border: 15px solid blue;
position: relative;
}
.video-background { /* class name used in javascript too */
width: 100%; /* width needs to be set to 100% */
height: 100%; /* height needs to be set to 100% */
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
JS:
JS：
function scaleToFill() {
$('video.video-background').each(function(index, videoTag) {
var $video = $(videoTag),
videoRatio = videoTag.videoWidth / videoTag.videoHeight,
tagRatio = $video.width() / $video.height(),
val;
if (videoRatio < tagRatio) {
val = tagRatio / videoRatio * 1.02; <!-- size increased by 2% because value is not fine enough and sometimes leaves a couple of white pixels at the edges -->
} else if (tagRatio < videoRatio) {
val = videoRatio / tagRatio * 1.02;
}
$video.css('transform','scale(' + val + ',' + val + ')');
});
}
$(function () {
scaleToFill();
$('.video-background').on('loadeddata', scaleToFill);
$(window).resize(function() {
scaleToFill();
});
});
回答by campsjos
You can set a video as a background to any HTML element easily thanks to transformCSS property.
借助transformCSS 属性，您可以轻松地将视频设置为任何 HTML 元素的背景。
This code centers the video inside a div with class video-containercovering all its area, just like backgoround-position: center center; background-size: cover;does for images.
这段代码将视频放在一个 div 中，类video-container覆盖了它的所有区域，就像backgoround-position: center center; background-size: cover;图像一样。
Also you can use the transformtechinque to center vertically and horizontally any HTML element.
您也可以使用该transform技术将任何 HTML 元素垂直和水平居中。
<style>
.video-container {
height: 500px;
width: 500px;
overflow: hidden;
position: relative;
}
video {
min-width: 100%;
min-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
</style>
<div class="video-container">
<video autoplay muted loop>
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
</video>
<h2>Your caption here</h2>
</div>
