[ios] HTML5 Video autoplay on iPhone

I have some kind of a strange problem. I try to create a website with a looped background video. The code looks like this one:

<video src="video/bg.mp4" style="z-index: -1;object-fit: cover;" poster="video/bg.jpg" autobuffer autoplay loop muted></video>

This works perfectly fine on most browsers (IE struggles with this object-fit thing but I don't mind) but on iPhone the video won't autoplay but on iPad it does. I already read the New Policies for iOS and I think I meet the requirements (otherwise iPad won't autoplay). I did some other testing:

  • Removing overlaying divs won't fix it
  • Removing z-index won't fix it
  • Wifi or Cellular doesn't make a difference
  • Video filesize doesn't make a difference, too

Am I doing it wrong or does iPhone simply won't autoplay videos and always requires interaction? I only care for iOS 10, I know that the requirements were different on iOS 9

This question is related to ios html video webkit autoplay

The answer is

Does playsinline attribute help?

Here's what I have:

<video autoplay loop muted playsinline class="video-background ">
  <source src="videos/intro-video3.mp4" type="video/mp4">

See the comment on playsinline here: https://webkit.org/blog/6784/new-video-policies-for-ios/

iOs 10+ allow video autoplay inline. but you have to turn off "Low power mode" on your iPhone.

Here is the little hack to overcome all the struggles you have for video autoplay in a website:

  1. Check video is playing or not.
  2. Trigger video play on event like body click or touch.

Note: Some browsers don't let videos to autoplay unless the user interacts with the device.

So scripts to check whether video is playing is:

Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
get: function () {
    return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);

And then you can simply autoplay the video by attaching event listeners to the body:

$('body').on('click touchstart', function () {
        const videoElement = document.getElementById('home_video');
        if (videoElement.playing) {
            // video is already playing so do nothing
        else {
            // video is not playing
            // so play video now

Note: autoplay attribute is very basic which needs to be added to the video tag already other than these scripts.

You can see the working example with code here at this link:

How to autoplay video when the device is in low power mode / data saving mode / safari browser issue

I had a similar problem and I tried multiple solution. I solved it implementing 2 considerations.

  1. Using dangerouslySetInnerHtml to embed the <video> code. For example:
<div dangerouslySetInnerHTML={{ __html: `
    <video class="video-js" playsinline autoplay loop muted>
        <source src="../video_path.mp4" type="video/mp4"/>
  1. Resizing the video weight. I noticed my iPhone does not autoplay videos over 3 megabytes. So I used an online compressor tool (https://www.mp4compress.com/) to go from 4mb to less than 500kb

Also, thanks to @boltcoder for his guide: Autoplay muted HTML5 video using React on mobile (Safari / iOS 10+)

Questions with ios tag:

Adding a UISegmentedControl to UITableView Crop image to specified size and picture location Undefined Symbols error when integrating Apptentive iOS SDK via Cocoapods Keep placeholder text in UITextField on input in IOS Accessing AppDelegate from framework? Autoresize View When SubViews are Added Warp \ bend effect on a UIView? Speech input for visually impaired users without the need to tap the screen make UITableViewCell selectable only while editing Xcode 12, building for iOS Simulator, but linking in object file built for iOS, for architecture arm64 iPhone is not available. Please reconnect the device Is it possible to opt-out of dark mode on iOS 13? Make a VStack fill the width of the screen in SwiftUI Presenting modal in iOS 13 fullscreen The iOS Simulator deployment targets is set to 7.0, but the range of supported deployment target version for this platform is 8.0 to 12.1 Xcode 10.2.1 Command PhaseScriptExecution failed with a nonzero exit code Xcode 10: A valid provisioning profile for this executable was not found Xcode 10, Command CodeSign failed with a nonzero exit code Command CompileSwift failed with a nonzero exit code in Xcode 10 How to format DateTime in Flutter , How to get current time in flutter? Xcode couldn't find any provisioning profiles matching How can I change the app display name build with Flutter? Convert Json string to Json object in Swift 4 Distribution certificate / private key not installed Get safe area inset top and bottom heights Error ITMS-90717: "Invalid App Store Icon" iOS Swift - Get the Current Local Time and Date Timestamp Xcode 9 Swift Language Version (SWIFT_VERSION) How do I use Safe Area Layout programmatically? Fixing Xcode 9 issue: "iPhone is busy: Preparing debugger support for iPhone" Cordova app not displaying correctly on iPhone X (Simulator) Detect if the device is iPhone X Xcode 9 error: "iPhone has denied the launch request" No signing certificate "iOS Distribution" found iOS 11, 12, and 13 installed certificates not trusted automatically (self signed) com.apple.WebKit.WebContent drops 113 error: Could not find specified service Safe Area of Xcode 9 How do you perform wireless debugging in Xcode 9 with iOS 11, Apple TV 4K, etc? What are my options for storing data when using React Native? (iOS and Android) Xcode Error: "The app ID cannot be registered to your development team." Open Url in default web browser Linker Command failed with exit code 1 (use -v to see invocation), Xcode 8, Swift 3 HTML5 Video autoplay on iPhone Swift error : signal SIGABRT how to solve it What is the meaning of 'No bundle URL present' in react-native? Convert NSDate to String in iOS Swift How can I regenerate ios folder in React Native project? `React/RCTBridgeModule.h` file not found Removing object from array in Swift 3 I get conflicting provisioning settings error when I try to archive to submit an iOS app

Questions with html tag:

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment Angular 6: saving data to local storage Vue.js get selected option on @change Bootstrap 4 multiselect dropdown How to add bootstrap in angular 6 project? Angular 5 Button Submit On Enter Key Press Angular 5, HTML, boolean on checkbox is checked How to render string with html tags in Angular 4+? bootstrap 4 file input doesn't show the file name How can I execute a python script from an html button? Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width Failed to load resource: the server responded with a status of 404 (Not Found) css Change arrow colors in Bootstraps carousel Bootstrap 4 Dropdown Menu not working? CSS Grid Layout not working in IE11 even with prefixes How to prevent page from reloading after form submit - JQuery Centering in CSS Grid Detecting real time window size changes in Angular 4 Angular 4 img src is not found (change) vs (ngModelChange) in angular Bootstrap 4: Multilevel Dropdown Inside Navigation Align the form to the center in Bootstrap 4 How to style a clicked button in CSS How do I change the font color in an html table? Redirecting to a page after submitting form in HTML Load json from local file with http.get() in angular 2 display: flex not working on Internet Explorer Scroll to element on click in Angular 4 How to extract svg as file from web page force css grid container to fill full screen of device How does the "position: sticky;" property work? HTML5 Video autoplay on iPhone Disable button in angular with two conditions? CSS hide scroll bar, but have element scrollable CSS grid wrapping How to load image (and other assets) in Angular an project? Flask - Calling python function on button OnClick event How can I make Bootstrap 4 columns all the same height? Wrapping a react-router Link in an html button

Questions with video tag:

How to handle "Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first." on Desktop with Chrome 66? How to make a movie out of images in python HTML5 Video autoplay on iPhone How do we download a blob url video Twitter - How to embed native video from someone else's tweet into a New Tweet or a DM How to embed new Youtube's live video permanent URL? How to disable auto-play for local video in iframe Writing an mp4 video using python opencv How to extract 1 screenshot for a video with ffmpeg at a given time? Bootstrap 3 - Responsive mp4-video Embed YouTube video - Refused to display in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN' Streaming a video file to an html5 video player with Node.js so that the video controls continue to work? What bitrate is used for each of the youtube video qualities (360p - 1080p), in regards to flowplayer? Is there a way to link someone to a YouTube Video in HD 1080p quality? Embed youtube videos that play in fullscreen automatically Download TS files from video stream How to playback MKV video in web browser? HTML5 Video not working in IE 11 youtube: link to display HD video by default YouTube URL in Video Tag Disable html5 video autoplay How to process images of a video, frame by frame, in video streaming using OpenCV and Python Cutting the videos based on start and end time using ffmpeg Clicking HTML 5 Video element to play, pause video, breaks play button HTML5 Video Autoplay not working correctly Live-stream video from one android phone to another over WiFi HTML5 Video // Completely Hide Controls How can I embed a YouTube video on GitHub wiki pages? How to add a new audio (not mixing) into a video using ffmpeg? Fastest way to extract frames using ffmpeg? What is the difference between H.264 video and MPEG-4 video? an attempt was made to access a socket in a way forbbiden by its access permissions. why? Play infinitely looping video on-load in HTML5 How can I extract a good quality JPEG image from a video file with ffmpeg? Correct mime type for .mp4 How to embed a YouTube channel into a webpage Play local (hard-drive) video file with HTML5 video tag? Detect if HTML5 Video element is playing YouTube embedded video: set different thumbnail How to mute an html5 video player using jQuery TCP vs UDP on video stream How to center HTML5 Videos? Force HTML5 youtube video How to make an embedded Youtube video automatically start playing? Android video streaming example changing source on html5 video tag Can I avoid the native fullscreen video player with HTML5 on iPhone or android? How to get video duration, dimension and size in PHP? How to play YouTube video in my Android application? Reducing video size with same format and reducing frame size

Questions with webkit tag:

com.apple.WebKit.WebContent drops 113 error: Could not find specified service HTML5 Video autoplay on iPhone What does the shrink-to-fit viewport meta attribute do? Chrome / Safari not filling 100% height of flex parent How to style HTML5 range input to have different color before and after slider? What are -moz- and -webkit-? Video auto play is not working in Safari and Chrome desktop browser Rotate and translate Background color not showing in print preview Blurry text after using CSS transform: scale(); in Chrome CSS full screen div with text in the middle Twitter Bootstrap modal on mobile devices Javascript / Chrome - How to copy an object from the webkit inspector as code CSS transition shorthand with multiple properties? CSS media query to target iPad and iPad only? text-align: right on <select> or <option> Preventing scroll bars from being hidden for MacOS trackpad users in WebKit/Blink Custom bullet symbol for <li> elements in <ul> that is a regular character, and not an image Chrome/jQuery Uncaught RangeError: Maximum call stack size exceeded Add custom headers to WebView resource requests - android css3 transition animation on load? What is the correct "-moz-appearance" value to hide dropdown arrow of a <select> element CSS endless rotation animation Custom CSS Scrollbar for Firefox Maximum call stack size exceeded error Removing rounded corners from a <select> element in Chrome/Webkit Convert Data URI to File then append to FormData HTML5 placeholder css padding How to create a pulse effect using -webkit-animation - outward rings Unsafe JavaScript attempt to access frame with URL Disable webkit's spin buttons on input type="number"? jQuery get the location of an element relative to window How can I force WebKit to redraw/repaint to propagate style changes? What is WebKit and how is it related to CSS? CSS3 Continuous Rotate Animation (Just like a loading sundial) Interpreting segfault messages How can I debug javascript on Android? JavaScript: Is there a way to get Chrome to break on all errors? Detect rotation of Android phone in the browser with JavaScript How to remove the border highlight on an input text element Firing a Keyboard Event in Safari, using JavaScript How to set the style -webkit-transform dynamically using JavaScript? Submitting a form on 'Enter' with jQuery? How do I print an IFrame from javascript in Safari/Chrome Get the real width and height of an image with JavaScript? (in Safari/Chrome) Is there an embeddable Webkit component for Windows / C# development?

Questions with autoplay tag:

HTML5 Video autoplay on iPhone How to disable auto-play for local video in iframe Autoplay an audio with HTML5 embed tag while the player is invisible Disable html5 video autoplay HTML5 Video Autoplay not working correctly Very Simple Image Slider/Slideshow with left and right button. No autoplay