html - iPad ではビデオが小さすぎます (高さ)

Question

ブートストラップ レスポンシブ サイトで動画を表示したい。

CSS ファイルで、ビデオ タグの幅を .span7 ボックスの 100% に定義し、高さを auto に設定しました。ブラウザ ウィンドウの幅を変更すると、デスクトップで非常にうまく機能します。iPhoneでも非常によく見えます。

iPad でのみ、ビデオの幅は 100% ですが、高さは約 2 ブートストラップ行にすぎません。それは小さすぎます。どうして？

SafariモバイルのiPadで高さが非常に小さいのはなぜですか?

Answer 1

これは私が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;
}

プレビュー画像（ポスター）を含むチャームのような作品。