Fix HTML5 Video Not Autoplaying in Safari on iPhone and iPad

A muted, looping background video with autoplay can play in desktop browsers and still refuse to start on an iPhone. On iPhone, Safari plays video in fullscreen unless the <video> element has the playsinline attribute, and it won’t autoplay a video that would have to open in fullscreen.

Won’t autoplay on iPhone

This version has autoplay, loop and muted, but no playsinline:

<video autoplay="true" loop="true" muted>
    <source src="example.mp4" type="video/mp4">
</video>

Works: add playsinline

Adding playsinline lets the video play inside the page, so autoplay starts:

<video autoplay="true" loop="true" playsinline muted>
    <source src="example.mp4" type="video/mp4">
</video>

• Keep muted. Browsers generally block autoplay for videos with sound.
• autoplay, loop, muted and playsinline are boolean attributes: their presence turns them on. autoplay="true" works the same as plain autoplay, and autoplay="false" would still turn it on.
• In the WordPress Video block, the same attribute is the Play inline setting in the block sidebar.

Video reference: https://youtu.be/M1UzCyJHdwQ

Related articles

• playing a video only when it scrolls into view: autoplay and pause with jQuery
• stopping Safari on iPhone from zooming into form fields: another iPhone Safari quirk and its fix

See also: How to Add Wistia Videos in WordPress.