HTML5 Video autoplay on iPhone

Question

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    x000D   x000D   lt video src  video bg mp4  style  z-index  -1 object-fit  cover   poster  video bg jpg  autobuffer autoplay loop muted gt  lt  video gt  x000D   x000D   x000D    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

User · Answer

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

User · Answer

Here is the little hack to overcome all the struggles you have for video autoplay in a website    Check video is playing or not  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  gt  0  amp  amp   this paused  amp  amp   this ended  amp  amp  this readyState  gt  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             videoElement play                    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

User · Answer

I had a similar problem and I tried multiple solution  I solved it implementing 2 considerations   Using dangerouslySetInnerHtml to embed the  lt video gt  code  For example    lt div dangerouslySetInnerHTML      html         lt video class  quot video-js quot  playsinline autoplay loop muted gt           lt source src  quot    video path mp4 quot  type  quot video mp4 quot   gt       lt  video gt       gt    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

User · Answer

Does playsinline attribute help   Here s what I have    lt video autoplay loop muted playsinline class  video-background   gt     lt source src  videos intro-video3 mp4  type  video mp4  gt   lt  video gt    See the comment on playsinline here  https   webkit org blog 6784 new-video-policies-for-ios

[ios] HTML5 Video autoplay on iPhone

Examples related to ios

Examples related to html

Examples related to video

Examples related to webkit

Examples related to autoplay