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

Question

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

#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/

Answer 1

你可以试试:

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>

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

这是一个 fiddle working example.

希望对您有所帮助:)