如何给网站头部添加视频海报

来源：cnblogs　　作者：Tynam.Yang　　时间：2018/10/25 9:12:31　　对本文有异议

给网站头部添加视频海报

 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>