给网站头部添加视频海报

 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='/images/loading.gif' data-original="video/banner.mp4">45   </video>46   <h2>SLOW DOWN</h2>47   <h4>静下来<br> 携一缕清风，续一杯清茶 <br> 且听风轻云淡</h4>48  </div>  49 </body>50 </html>

结果