CODEWITHSUNDEEP
htmlvideotwitter-bootstrapresponsive-design
vlad
vlad

Reputation: 21

Video too small on iPad (height)

Want to show a video in a bootstrap responsive site.

In my CSS file I defined the video tag width to be 100 % of the .span7 box and set the height to auto. Works very well on desktop when I change the width of the browser window. On iPhone it looks very well, too.

Only on iPad the video width is 100 % but height is only about 2 bootstrap rows. That's too small. Why that?

Why is the height so small on iPad in Safari mobile?

Upvotes: 1

Views: 1814

Answers (1)

samuelg0rd0n
samuelg0rd0n

Reputation: 1258

This is the trick I use for 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;
}

Works like a charm including the preview image (poster).

Upvotes: 2

Related Questions