video 背景圖平鋪
阿新 • • 發佈:2020-08-26
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>
效果