Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 widthOn a responsive HTML5 page, a video can be shown at full width (100%) by applying the following CSS. 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 centre contains a little video that is shown at its original resolution of 480x270 pixels.
Following are the examples for how safari on ipad IOS6 does not scale HTML5 video To fill 100% of page widthOn a responsive HTML5 page
Example 1
In the following example we are setting the video width and height within the style property.
<!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>
On executing the above script, it will generate the output consisting of the video uploaded on the webpage and make it fit for all the sources set by using the style property.
Example 2
In the following example we are using the <video> with the 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 gets executed, the output window will pop up, displaying the video on the webpage, making it fit for all the sources.
725 Views
