Question

我的网站上有一个背景HTML5视频：

<video id="video_background" preload="auto" autoplay="true" loop="loop" poster="images/poster.png"> 
 <source src="videos/video-1.webm" type="video/webm"> 
 <source src="videos/video-1.mp4" type="video/mp4"> 
 <source src="videos/video-1.ogg" type="video/ogg">
 <p>Your browser does not support the video element. Try this page in a modern browser!</p>  
</video>

CSS：

#video_background { 
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
}

但是海报图片在手机和平板电脑设备上无法正常工作，它无法扩展以适应整个窗口的分辨率!!

我的问题是如何让海报图片适合任何移动设备/平板电脑上的窗口。

屏幕截图：http://imgur.com/hZuKHAx

网站CSS布局：http://jossefbn.com/css/layout.css

请帮助我卡住!!

Answer 1

您可以按宽度和高度调整视频或拉伸视频（在移动设备中通过媒体查询）。

拉伸

 #video_background {
    position: absolute;
    bottom: 0px;
    right: 0px;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1000;
    overflow: hidden;
    //stretch 
    -webkit-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -ms-transform: scale(1,1);
    -o-transform: scale(1,1);
    transform: scale(1,1);
}

宽度和高度：

 #video_background {
    position: absolute;
    bottom: 0px;
    right: 0px;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1000;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

HTML5视频海报不适合移动设备

1 个答案: