作者:风里火 | 来源:互联网 | 2023-05-21 15:26
我想放置一个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/
1> ala_747..: 你可以尝试:
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;
}
Sample Title
2> pschueller..: 如果我理解正确,这应该像将min-height和min-width设置为100%一样简单.例如:
#video {
position: fixed;
left: 0;
top: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
这可能需要针对响应性进行调整.
看看这个jsfiddle .
编辑:
如果您还希望视频保持居中,则将其包装在容器中,如下所示:
#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;
}
Your browser does not support HTML5 video.