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

前端之家收集整理的这篇文章主要介绍了使用css或javascript放置100%高度和100%宽度的视频前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想放置一个 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/

解决方法

你可以尝试:
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.

希望能帮助到你 :)

猜你在找的CSS相关文章