video 背景图平铺

 

video 得背景图 poster 可以为video添加背景图片

<video controls poster="img/newLiat_1.jpg" class="new_img">
                                        <source src="video/review_video.mp4" type="video/mp4">
                                        你的浏览器不支持视频插件
                                    </video>

　　有的时候 发现背景图片 没有平铺整个视频区域

 

 

 

解决方案

1.css 方案

video {
    object-fit: fill;
}

　

效果：

　

兼容性

​​相关链接  https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit​​

 

2.添加img

<div class="review_video_main">
                    <div class="video_main">
                        <video controls="">
                            <source src="./video/review_video.mp4" type="video/mp4">您的浏览器版本太低,请及时更新
                        </video>
                    </div>
                    <div class="video_btn">
                        <img src="./img/review_video_bg.png" alt=""> //封面图片 
                        <button type="button" title="" class="playicon"></button> 按钮
                    </div>
                </div>

　　效果