HTML5实现动态视频背景

html代码

<video  id="v1" autoplay loop muted >
       <source   src="https://wallpaperm-mp4.duba.com/scene/preview_video/97ba6b60662ab4f31ef06cdf5a5f8e94_preview.mp4" />
   </video>

css代码 已经把整个页面铺平

*{  
            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;  
        }