如何在网站头部添加视频海报？添加视频海报的方法（代码示例）

给网站头部添加视频海报的代码：

!DOCTYPE htML>
    html>
    head>
        meta charset="UTF-8">
        tITle>
    视频海报/title>
        style>
        *{
                margin: 0;
                padding: 0;
        }
    #banner{
            width: 100%;
            height: 500px;
            background: purple;
            overflow: hidden;
            position: relative;
    }
    #banner video{
            width: 100%;
            position: relative;
            opacity: 0.6;
  /* 设置透明度 */    }
    #banner h2,h4{
            position: absolute;
            top: 120px;
            left: 150px;
            width: 100%;
            text-align: left;
            color: #fff;
            line-height: 30px;
            }
    #banner h2{
            top: 80px;
            font-Size: 40px;
            text-decoration: underline;
    }
        /style>
    /head>
    body>
        div id="banner">
            video loop autoplay>
       !-- loop循环播放，autoplay自动播放 -->
                 source src="video/banner.mp4">
            /video>
            h2>
    SLOW DOWN/h2>
            h4>
    静下来br>
     携一缕清风，续一杯清茶 br>
     且听风轻云淡/h4>
        /div>
            /body>
    /html>
    

结果

以上就是如何在网站头部添加视频海报？添加视频海报的方法（代码示例）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！