Safari บน iPad (iOS6) ไม่ Scale HTML5 Video ให้เต็ม 100% ความกว้าง

แก้ด้วย Responsive Padding Technique (Intrinsic Ratio)

ใช้ padding-top แทน height เพื่อรักษาอัตราส่วนวิดีโอ

CSS

#video-box {
    padding-top: 56.25%; /* 16:9 aspect ratio */
    position: relative;
}
#video-box video,
#video-box object {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    display: block;
}

HTML

<div id="video-box">
  <video src="movie.mp4" controls></video>
</div>

padding-top: 56.25% สร้างพื้นที่สูงสัมพันธ์กับความกว้าง (16:9) วิดีโอจึงขยายเต็มพื้นที่