Home > Article > Web Front-end > Safari on iPad (iOS6) cannot scale HTML5 video to fill 100% of page width
Safari on iPad (iOS6) cannot scale HTML5 video to fill 100% of page width
- PHPzforward
- 2023-09-01 16:45:081278browse
This article will teach you how to make HTML5 videos fill 100% of the page width without scaling in safari on ipad IOS6 On a responsive HTML5 page, you can make it full width (100%) by applying the following CSS ) to display the video. The original resolution of the video is 480x270. On all desktop browsers, the video resizes to span the entire width of the page while preserving the aspect ratio.
However, on iPad (iOS 6.0.1), Mobile Safari, and Chrome, a black rectangle is displayed that is the same width as the page. The center of the black rectangle contains a small video with a native resolution of 480x270 pixels.
Here is an example of how safari on ipad IOS6 does not scale an HTML5 video to fill 100% of the page width on a responsive HTML5 page
Example 1
In the example below, we will set the video width and height in the style attribute.
<!DOCTYPE html>
<html>
<style>
video {
width: 100%;
max-width: 100%;
height: auto;
border: 1px solid red;
}
</style>
<body>
<video preload autoplay controls>
<source src=https://samplelib.com/lib/preview/mp4/sample-5s.mp4>
</video>
</body>
</html>
When the above script is executed, it will generate an output consisting of the videos uploaded on the web page and make it suitable for all sources set using the style attribute.
Example 2
In the following example, we use position set to absolute
<!DOCTYPE html>
<html>
<style>
video {
width: 100%;
position: absolute;
}
</style>
<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 is executed, the output window will pop up, displaying the video on the web page, making it suitable for all sources.
The above is the detailed content of Safari on iPad (iOS6) cannot scale HTML5 video to fill 100% of page width. For more information, please follow other related articles on the PHP Chinese website!