HTML5 Video Background not playing Safari on iPhone

Question

I have the video background plugin for site origin page builder (Wordpress) and I have uploaded a background video (MP4 and WEBM formats). The file sizes are around 35mb and 17mb respectively.

I have tested on a couple of iPhones running up to date iOS with safari and the video is not autoplaying as it should (only showing fallback image).

Video Code:

<video id="so_bgvideo_5df3a8b601042" 
class="so_video_bg jquery-background-video is-playing is-visible" 
loop="" autoplay="" playsinline="" muted="" data-bgvideo="" 
poster="https://mywebsite.com/fallback-image.jpg" 
data-bgvideo-fade-in="500" data-bgvideo-pause-after="120" 
data-bgvideo-show-pause-play="true" 
data-bgvideo-pause-play-x-pos="right"
data-bgvideo-pause-play-y-pos="top" 
style="min-width: auto; min-height:auto; width: 100%; height: auto;
position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
transition-duration: 500ms;">
<source src="https://mywebsite.com/video.mp4" type="video/mp4">
<source src="https://mywebsite.com/video.webm" type="video/webm">
</video>

As far as I can tell the video contains the attributes required via Safari (and it plays fine on Safari desktop).

Can anyone please advise a fix to get it working on Safari mobile?

i think chrome and safari doesn't allow auto-playing of videos, it will only work in muted mode. — Nijeesh Joshy, Dec 17 '19 at 12:16
Possible duplicate of https://stackoverflow.com/a/51432617/9781954 — stijnb1234, Dec 17 '19 at 12:24
Here's the official blog post about the restrictions in case it's helpful: https://webkit.org/blog/6784/new-video-policies-for-ios/ — Pikamander2, Dec 23 '19 at 06:54

score 20 · Answer 1 · answered Dec 21 '19 at 17:36

20

Safari doesn't allow autoplay of video on these 2 scenarios

when "muted" config not set
when iphone is in battery saving mode or in low battery

To achieve autoplay, enable mute and autoplay in both attribute and via js like

<video id="BgVideo" muted autoplay>

<script>
var bgvideo = document.getElementById("BgVideo");
bgvideo.muted = true;
bgvideo.play();
</script>

answered Dec 21 '19 at 17:36

Ganeshkumar K

485
2
8

1

Hi @Ganeshkumar K, this was missing from my set up (in the script section) but still doesn't work on Safari iOS??? – YorkieMagento Jan 06 '20 at 13:07
If u could setup your code in codepen/jsfiddle and share the link, then I can look better into it. – Ganeshkumar K Jan 08 '20 at 09:12
Thanks @Ganeshkumar K. Found the resolution to the issue on GitHub, and updated in an answer. – YorkieMagento Jan 09 '20 at 09:11

score 12 · Answer 2 · answered Jun 05 '20 at 06:29

12

Just add "playsinline" along with mute and autoplay.. that's it..

<video autoplay loop muted playsinline src="..."></video>

answered Jun 05 '20 at 06:29

Mani Kandan k

121
1
2

1

This should be the correct answer. – Bob Arezina Jan 19 '22 at 03:28

Nijeesh Joshy · Answer 3 · 2019-12-19T13:44:55.563

3

i think chrome and safari doesn't allow auto-playing of videos, it will only work in muted mode.

<video muted autoplay>
</video>

i believe you can also start the autoplay with js

<script>
    document.getElementById('so_bgvideo_5df3a8b601042').play();
</script>

edited Dec 19 '19 at 13:44

answered Dec 17 '19 at 12:18

Nijeesh Joshy

1,426
13
24

Hi Nijeesh, the video is in muted mode as per attribute. – YorkieMagento Jan 06 '20 at 13:24
sorry, is that a question or are you suggesting me something ? – Nijeesh Joshy Jan 06 '20 at 13:32
Hi, I have all the attributes suggested already in video element and script... and is still not working for me. Any other ideas please? – YorkieMagento Jan 06 '20 at 13:34
have you tried triggering the play with JavaScript ? also which browser you are having issue with ? may be take a look at this:- https://stackoverflow.com/questions/34764876/html-5-video-autoplay-not-automatically-starting-in-chrome – Nijeesh Joshy Jan 06 '20 at 14:49

Niroh · Answer 4 · 2019-12-22T00:37:19.350

Try removing the ="" ? not sure if that will do it..

<video id="so_bgvideo_5df3a8b601042" class="so_video_bg jquery-background-video is-playing is-visible" loop autoplay playsinline muted data-bgvideo="" poster="https://4f15fi427agh15x4ol42ijp7-wpengine.netdna-ssl.com/wp- content/uploads/video-marketing-1920x1080.jpg" data-bgvideo-fade-in="500" data-bgvideo-pause-after="120" data-bgvideo-show-pause-play="true" data-bgvideo-pause-play-x-pos="right" data-bgvideo-pause-play-y-pos="top" style="min-width: auto; min-height:auto; width: 100%; height: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition-duration: 500ms; z-index: 999;">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    <source src="https://mywebsite.com/video.webm" type="video/webm">
</video>

Maybe add this script? this work for me in safari.

<script>
    document.getElementById('so_bgvideo_5df3a8b601042').play();
</script>

Hi Niroh, the ="" aren't in the code set up. They are added by Chrome and there when I inspected. — YorkieMagento, Jan 06 '20 at 13:25

score 1 · Accepted Answer · answered Jan 09 '20 at 09:14

UPDATE

As stated in initial post I was using a video background for site origins plugin for Wordpress.

Although the plugin hadn't been updated in recent times, an update was available on GitHub here: https://github.com/BGStock/jquery-background-video/blob/master/jquery.background-video.js

Adding this new file/overwriting the old one resolved the issue on iOS. Hope this helps anyone else using this particular plugin.

score 1 · Answer 6 · answered Feb 05 '21 at 06:57

I encountered same issue in Safari only and already tried every ways such as adding playsinline within video tag which doesn't work. Converting .mp4 video link to BLOB in javascript worked wonder for me.

Initially, define id (e.g. id="ForcePlay") in video source tag:

 <video id="ForcePlay" width="500px" height="500px" muted playsinline controls> 
    <source src="url path to your video file" type="video/mp4">
 </video>

Create your javascript within your html file, here we convert the video link to blob:

<script type="text/javascript">
  function makeURL(object) {
    return (window.URL) ? window.URL.createObjectURL(object) :    
    window.webkitURL.createObjectURL(object);
  }

  async function display(videoStream){
    var myvideo = document.getElementById('ForcePlay');
    let blob = await fetch(videoStream).then(r => r.blob());
    var videoUrl= makeURL(blob);
    myvideo.src = videoUrl;
  }

  display('url path to your video file');
</script>

score -1 · Answer 7 · answered Sep 06 '21 at 22:16

I have a full code working here, just copy and edit :)))

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>page_trouble</title>
    <meta charset="utf-8" />
    <style type="text/css">
    
  * {
 margin:0;
 padding:0;
 }
 
  
 video#bgvid {

  min-width: auto; min-height: 150vh;
  width: auto; height: auto; z-index: -100;
  background-size: cover;
}
  
  
</style>
    
    
</head>
<body style="background-color:black;">


    <video autoplay loop muted playsinline id="bgvid" >
<source src="fleur_trouble.mp4" type="video/mp4""
<source src="fleur_trouble.webpm" type="video/webpm""


</body>

</html>

Please provide additional details in your answer. As it's currently written, it's hard to understand your solution. — Community, Sep 07 '21 at 00:42

HTML5 Video Background not playing Safari on iPhone

7 Answers7

Linked