Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Safari on iPad (iOS6) does not scale HTML5 video to fill 100% of page width
This article will teach you how Safari on iPad iOS6 does not scale HTML5 video to fill 100% of page width. On a responsive HTML5 page, a video can be shown at full width (100%) by applying CSS styling. The video's native resolution is 480x270. On all desktop browsers, the video is resized to span the entire width of the page while preserving the aspect ratio.
On the iPad (iOS 6.0.1), Mobile Safari and Chrome, however, display a black rectangle same width as the page. The black rectangle's center contains a small video that is shown at its original resolution of 480x270 pixels, creating an undesired letterbox effect.
This issue occurs because older iOS versions had different video rendering behaviors compared to desktop browsers. The following examples demonstrate this scaling problem and potential solutions ?
Example 1
In the following example we are setting the video width and height within the style property ?
<!DOCTYPE html>
<html>
<head>
<style>
video {
width: 100%;
max-width: 100%;
height: auto;
border: 1px solid red;
}
</style>
</head>
<body>
<video preload autoplay controls>
<source src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4" type="video/mp4">
</video>
</body>
</html>
On executing the above script, it will generate the output consisting of the video uploaded on the webpage. On desktop browsers, this makes the video fit the full width, but on iPad iOS6, you may see the black rectangle issue.
Example 2
In the following example we are using the <video> element with the position set to absolute ?
<!DOCTYPE html>
<html>
<head>
<style>
video {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<video preload autoplay controls>
<source src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4" type="video/mp4">
</video>
</body>
</html>
When the script gets executed, the output window will display the video on the webpage with absolute positioning, but the scaling issue may persist on older iPad versions.
Conclusion
The HTML5 video scaling issue in Safari on iPad iOS6 stems from older rendering behaviors that don't properly respect CSS width properties. Modern iOS versions have resolved this compatibility issue with improved video element handling.
1K+ Views
