I have a background video on my site olegefimkin.ru which should start playing automatically on page load. And it does on PC and some phones, but doesn't on some phones and tablets (e.g. iPhone). I'm using this html code:

<video autoplay loop muted id="main-video">
  <source src="/themes/basic/video/intro.webm" type="video/webm"></source>
  <source src="/themes/basic/video/intro.mp4" type="video/mp4"></source>
</video>

I've also tried to add javascript video.play() but it still doesn't work in Safari. How can i make video autoplay on mobile devices?

I have a background video on my site olegefimkin.ru which should start playing automatically on page load. And it does on PC and some phones, but doesn't on some phones and tablets (e.g. iPhone). I'm using this html code:

<video autoplay loop muted id="main-video">
  <source src="/themes/basic/video/intro.webm" type="video/webm"></source>
  <source src="/themes/basic/video/intro.mp4" type="video/mp4"></source>
</video>

I've also tried to add javascript video.play() but it still doesn't work in Safari. How can i make video autoplay on mobile devices?

• javascript
• html
• html5-video

3 Answers 3

The video won't autoplay in Safari IOS unless you meet the following requirements:

<video> elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks.
<video muted> elements will also be allowed to autoplay without a user gesture.
If a <video> element gains an audio track or bees un-muted without a user gesture, playback will pause.
<video autoplay> elements will only begin playing when visible on-screen such as when they are scrolled into the viewport, made visible through CSS, and inserted into the DOM.
<video autoplay> elements will pause if they bee non-visible, such as by being scrolled out of the viewport.

You need to either remove the audio from the source or mute it and enable the sound to be activated by a gesture.

From the Webkit policies for video

<video poster="video-sg.jpg" playsinline autoplay muted loop>
  <source src="caffe.webm" type="video/webm">
  <source src="caffe.mp4"" type="video/mp4">
  Your Browser May Not Support This
</video>

On any recent desktop browser, it autoplays and loops as it should. But in mobile safari, it doesn't autoplay, or even play at all. I can't even hit the play button to get it going. Just the poster image displays.

Apologies if I'm hijacking the OP's question, but at least it's the same question!

<video class="video" autoplay="true" muted="true" playsinline autoplay loop muted>