iPad上的视频太小(高度)

时间:2013-04-27 13:43:31

标签: html video twitter-bootstrap responsive-design

想要在自举回应网站中展示视频。

在我的CSS文件中,我将视频标签宽度定义为.span7框的100%,并将高度设置为auto。当我更改浏览器窗口的宽度时,在桌面上工作得很好。在iPhone上它看起来也很好。

仅在iPad上,视频宽度为100%,但高度仅为2个自举行。那太小了。为什么?

为什么Safari手机iPad的高度如此之小?

1 个答案:

答案 0 :(得分:2)

这是我用于iPad的技巧:

<div class="video">
    <canvas width="960" height="540"></canvas>
    <video preload="none" width="960" height="540" controls poster="video.jpg">    
         <source src="video.mp4" type="video/mp4">
         <source src="video.webm" type="video/webm">
         Your browser does not support the video tag.
    </video>
</div>

CSS:

.video {
    position: relative;
}
.video video,
.video canvas {
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
 }
video {
    height: 100% !important;
    position: absolute;
}

像包括预览图像(海报)在内的魅力一样。

相关问题