HTML视频全屏播放背景

最新推荐文章于 2025-05-18 10:45:20 发布

原创最新推荐文章于 2025-05-18 10:45:20 发布 · 1.4w 阅读

36 ·

CC 4.0 BY-SA版权

文章标签：

#HTML视频全屏背景

HTML案例专栏收录该内容

1 篇文章

订阅专栏

全屏的视频播放用作背景。

<!-- video全屏背景 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>video scream background</title>
	<style type="text/css">
		*{  
            margin: 0px;  
            padding: 0px;  
        }  
        video{  
            position: fixed;  
            right: 0px;  
            bottom: 0px;  
            min-width: 100%;  
            min-height: 100%;  
            height: auto;  
            width: auto;  
            /*加滤镜*/  
            /*-webkit-filter: grayscale(100%);*/  
            /*filter:grayscale(100%);*/  
        }  
        source{  
            min-width: 100%;  
            min-height: 100%;  
            height: auto;  
            width: auto;  
        }  
	</style>
</head>
<body>
	<video autoplay="autoplay" loop="loop">  
   	 	<source  src="v.mp4" type="video/mp4" >;  
	</video> 
</body>
</html>