HTML全屏背景视频

1.样式调整

<style>
 *{  
            margin: 0px;  
            padding: 0px;  
        }  
        video{  
            position: fixed;  
            right: 0px;  
            bottom: 0px;  
            min-width: 100%;  
            min-height: 100%;  
            height: auto;  
            width: auto;  
            /*加滤镜*/
            /*filter: blur(15px); //背景模糊设置 */
            /*-webkit-filter: grayscale(100%);*/  
            /*filter:grayscale(100%); //背景灰度设置*/  
            z-index:-11
        }  
        source{  
            min-width: 100%;  
            min-height: 100%;  
            height: auto;  
            width: auto;  
        } 
      p{
          width: 100%;
         text-align: center;
         font-size: 40px;
         color: white;
      }
</style>

2.标签位置
在body标签最后添加

<video autoplay loop muted>
  <source src="76985746321512415.mp4" type="video/mp4"/>
</video>

猜你喜欢

转载自blog.csdn.net/wxzxmq/article/details/106859973