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
HTML5 inline video on iPhone vs iPad/Browser
The allowsInlineMediaPlayback property controls whether videos play inline within the webpage or launch in fullscreen mode on iOS devices. By default, iPhones force videos to play fullscreen, while iPads allow inline playback, creating inconsistent user experiences across devices.
Understanding this behavior is crucial for web developers creating video content that works seamlessly across all iOS devices and maintains consistent functionality with desktop browsers.
Default iOS Video Playback Behavior
On iOS devices, video playback behavior differs significantly −
iPhone (iOS 9 and earlier) − Videos automatically launch in fullscreen mode, preventing simultaneous display of other content.
iPad − Videos play inline by default, allowing other page content to remain visible during playback.
Desktop browsers − Videos play inline without restrictions.
This inconsistency occurs because the allowsInlineMediaPlayback property defaults to NO on iPhone but YES on iPad within the UIWebView framework.
Syntax
For iOS 9 and earlier, use the webkit-playsinline attribute −
<video webkit-playsinline> <source src="video.mp4" type="video/mp4"> </video>
For iOS 10 and later, use the standard playsinline attribute −
<video playsinline> <source src="video.mp4" type="video/mp4"> </video>
Pre-iOS 10 Solution
Before iOS 10, developers needed to use the webkit-playsinline attribute to enable inline video playback on iPhones. This webkit-specific attribute tells the iOS Safari browser to play the video within the webpage instead of launching the native fullscreen player.
Example
<!DOCTYPE html>
<html>
<head>
<title>iOS Pre-10 Inline Video</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Inline Video Example (iOS 9 and earlier)</h2>
<video id="myVideo" width="320" height="180" webkit-playsinline controls>
<source src="/html/mov_bbb.mp4" type="video/mp4">
<source src="/html/mov_bbb.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<p>This video should play inline on iPhone (iOS 9 and earlier) instead of fullscreen.</p>
</body>
</html>
The webkit-playsinline attribute ensures the video remains within the webpage layout on older iOS versions.
iOS 10+ Solution
Starting with iOS 10, Apple introduced the standard playsinline attribute, making it consistent with other modern browsers. This attribute works across all iOS devices and eliminates the need for webkit-specific prefixes.
Example
<!DOCTYPE html>
<html>
<head>
<title>iOS 10+ Inline Video</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Modern Inline Video (iOS 10+)</h2>
<video width="320" height="180" playsinline controls>
<source src="/html/sample_video.mp4" type="video/mp4">
<source src="/html/sample_video.webm" type="video/webm">
Your browser does not support the video tag.
</video>
<p>This video plays inline on all iOS 10+ devices and modern browsers.</p>
</body>
</html>
The standard playsinline attribute provides consistent behavior across all modern iOS devices and browsers.
Cross-Compatible Solution
For maximum compatibility across all iOS versions, use both attributes together. Modern browsers will ignore the webkit prefix, while older iOS versions will use it as a fallback.
Example
<!DOCTYPE html>
<html>
<head>
<title>Cross-Compatible Inline Video</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Universal Inline Video Solution</h2>
<div style="text-align: center; margin: 20px 0;">
<video width="400" height="225" webkit-playsinline playsinline controls>
<source src="/html/movie.mp4" type="video/mp4">
<source src="/html/movie.webm" type="video/webm">
<p>Your browser doesn't support HTML5 video. Here is a <a href="/html/movie.mp4">link to the video</a> instead.</p>
</video>
</div>
<p>Additional content can display alongside the video during playback.</p>
<div style="background-color: #f0f8ff; padding: 15px; margin-top: 20px; border-radius: 5px;">
<h3>Related Content</h3>
<p>This content remains visible while the video plays inline, demonstrating the benefit of inline playback over fullscreen mode.</p>
</div>
</body>
</html>
This approach ensures inline video playback works consistently across all iOS versions and other browsers.
Comparison of Approaches
| iOS Version | Attribute Required | iPhone Behavior | iPad Behavior |
|---|---|---|---|
| iOS 9 and earlier | webkit-playsinline |
Fullscreen (default), Inline (with attribute) | Inline (default) |
| iOS 10+ | playsinline |
Inline (with attribute) | Inline (default) |
| Cross-compatible | webkit-playsinline playsinline |
Inline (all versions) | Inline (all versions) |
Key Benefits of Inline Playback
Enabling inline video playback provides several advantages −
Better user experience − Users can interact with other page content while watching videos.
Consistent behavior − Videos behave the same way across different iOS devices.
Dynamic content − Allows overlaying controls, captions, or related content during video playback.
Responsive design − Videos remain part of the responsive layout instead of taking over the entire screen.
Conclusion
Use webkit-playsinline for iOS 9 and earlier compatibility, and playsinline for iOS 10+. For universal support, include both attributes in your video tags. This ensures consistent inline video playback across all iOS devices and maintains compatibility with desktop browsers.
574 Views
