我想放置一个 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/
最佳答案
你可以试试:
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>
它将保持纵横比和视频居中,同时始终完全覆盖容器。
希望对您有所帮助:)
关于javascript - 使用 css 或 javascript 放置 100% 高度和 100% 宽度的视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28574285/