给网站头部添加视频海报
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>视频海报</title> 6 ????<style> 7 ????????*{ 8 ????????????margin: 0; 9 ????????????padding: 0;10 ????????}11 ????#banner{12 ????????width: 100%;13 ????????height: 500px;14 ????????background: purple;15 ????????overflow: hidden;16 ????????position: relative;17 ????}18 ????#banner video{19 ????????width: 100%;20 ????????position: relative;21 ????????opacity: 0.6; ?/* 设置透明度 */22 ????}23 24 ????#banner h2,h4{25 ????????position: absolute;26 ????????top: 120px;27 ????????left: 150px;28 ????????width: 100%;29 ????????text-align: left;30 ????????color: #fff;31 ????????line-height: 30px;32 ????????33 ????}34 ????#banner h2{35 ????????top: 80px;36 ????????font-size: 40px;37 ????????text-decoration: underline;38 ????}39 ????</style>40 </head>41 <body>42 ????<div id="banner">43 ????????<video loop autoplay> ??<!-- loop循环播放，autoplay自动播放 --> 44 ????????????<source src="video/banner.mp4">45 ????????</video>46 ????????<h2>SLOW DOWN</h2>47 ????????<h4>静下来<br> 携一缕清风，续一杯清茶 <br> 且听风轻云淡</h4>48 ????</div> ???????49 </body>50 </html>结果
给网站头部添加视频海报
原文地址：https://www.cnblogs.com/tynam/p/9846759.html