使用 css 或 javascript 以 100% 的高度和 100% 的宽度放置视频

Place video with 100% height & 100% width using css or javascript

提问by Luca Steeb

I want to place a html5 video (with the video tag of course) with 100% width and 100% height which will play in the background. Here is an example with an image and I want exactly the same with a video, I just didn't find out how to do that:

我想放置一个 html5 视频（当然带有视频标签），宽度为 100%，高度为 100%，将在后台播放。这是一个带有图像的示例，我想要与视频完全相同，我只是不知道如何做到这一点：

#image {
    background-image: url("image.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

JSFiddle: http://jsfiddle.net/u9ncpyfu/

JSFiddle：http: //jsfiddle.net/u9ncpyfu/

回答by ala_747

You may try:

你可以试试：

header {
    position: relative;
    background-size: cover;
    background-position: 50% 50%;
    height: 100vh;
    z-index: 0;
}
header h1 {
    text-align: center;
    font: 3em/1.4 helvetica neue, helvetica, arial, sans-serif;
    color: #fff
}
header video {
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
}

<header>
    <h1>Sample Title</h1>
 <video autoplay loop class="bg-video">
  <source src="https://d2v9y0dukr6mq2.cloudfront.net/video/preview/abstract-rainbow_wjpctkdes__PM.mp4" type="video/mp4">
 </video>
</header>

It will keep the aspect ratio and the video centered while always fully covering the container.

它将保持纵横比和视频居中，同时始终完全覆盖容器。

Here's a fiddle working example.

这是一个小提琴工作示例。

Hope it helps :)

希望能帮助到你 ：）

回答by pschueller

If I understand correctly, this should be as simple as setting the min-height and min-width to 100%. So for example:

如果我理解正确，这应该就像将 min-height 和 min-width 设置为 100% 一样简单。例如：

#video {
    position: fixed;
    left: 0;
    top: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}

This may need to be adjusted for responsiveness.

这可能需要针对响应能力进行调整。

Check out this jsfiddle.

看看这个jsfiddle。

---

---

Edit:

编辑：

If you also want the video to remain centered, then wrap it in a container like so:

如果您还希望视频保持居中，请将其包裹在容器中，如下所示：

#video-wrap {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
#video {
    position: absolute;
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;   
}

<div id="video-wrap"><video id="video">
    <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>
</div>

Here also a jsfiddle.

这里还有一个jsfiddle。

回答by kellanburket

Set

放

 top: 0;
 left: 0;
 right: 0;
 bottom: 0;

You can forget about height: 100%, it only stretches to contain 100% of a div's interior content.

您可以忘记height: 100%，它只会延伸到包含 div 内部内容的 100%。

回答by Drazzah

Easy if you give the HTML and BODY a height of 100%.

如果给 HTML 和 BODY 设置 100% 的高度，就很容易了。

WORKING JSFIDDLE DEMO

工作 JSFIDDLE 演示

html,
body {
  height: 100%;
  overflow: hidden;
}
* {
  margin: 0;
  padding: 0;
}
video {
  height: 100%;
  width: 100%;
}

<video controls>
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
  <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>