html 使视频显示在页面的背景中,并使视频占据整个屏幕的大小。
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html 使视频显示在页面的背景中,并使视频占据整个屏幕的大小。相关的知识,希望对你有一定的参考价值。
#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(polina.jpg) no-repeat;
background-size: cover;
}
<!-- Video background -->
<div class="row" id="bgvid">
<video controls width="100%" height="100%" autoplay="autoplay" loop="loop" muted="muted">
<source src="rain.mp4" type="video/mp4">
Rainfall
</video>
</div>
<!-- Video background ends-->
以上是关于html 使视频显示在页面的背景中,并使视频占据整个屏幕的大小。的主要内容,如果未能解决你的问题,请参考以下文章
HTML5视频加载完成后如何使文本消失?
android代码并排合并两个视频并使其成为一个视频(只想要一个音频)
Chrome Html5 视频无法显示白色,背景为灰色
HTML5 视频进度滑块 [关闭]
使 HTML5 视频适合父元素大小
怎样用css 使背景图片覆盖整个页面