[JavaScript知识库]HTML5+CSS3 - 视频背景的实现

background实现视频背景

先上图，这个图片的背景的灯塔是个视频。

代码：

解析：

<video class="bg-dideo" autoplay loop muted>
    <source src="video/lighthouse.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>
<!--
autoplay :自动播放
loop ：循环播放
muted：静音播放
-->
<style>
/*video*/
video.bg-dideo {
    position: absolute; /*绝对定位，视频的框时相对定位*/
    top: 0;
    right: 0px;
    bottom: 0px;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    height: auto;
    width: auto;
    z-index: -11
}

video.bg-dideo source {
    min-width: 100%;
    min-height: 100%;
    height: auto;
    width: auto;
}

video.video {
    z-index: 10;
    width: 100%;
    height: 100%;
}
</style>

视频父元素的定位信息。