How to enable autoplay video in low power mode on iOS and macOS

What really blocks autoplay in Safari

Safari often allows autoplay of muted videos, but on iOS, the user or system can block it. In practice, you cannot guarantee autoplay on an iPhone. Therefore, you need to check if the video actually started, and if not — show a 'play' button or a light, animated preview. This keeps the experience consistent, even in low power mode.

Tested approach: progressive enhancement

First, implement a standard <video> with muted, playsinline, autoplay, and light preload. Then try to start playback with video.play(). If the browser rejects the promise (e.g., in low power mode), smoothly switch to an alternative — an animated image (GIF/WebP/APNG) or a clear 'Play' button. This respects user settings and does not break the design.

<div class="hero-video">
  <video id="heroVideo"
         preload="metadata"
         autoplay
         muted
         playsinline
         loop
         poster="https://site.com/video-poster.jpg"
         class="fullscreen-video">
    <source src="https://site.com/video.mp4" type="video/mp4">
    <!-- Optional: add WebM for broader support -->
    <source src="https://site.com/video.webm" type="video/webm">
  </video>

  <!-- Fallback shown if autoplay is blocked (e.g., iOS Low Power Mode) -->
  <img id="fallbackGif"
       src="https://site.com/video-fallback.gif"
       alt="Animated preview"
       style="display:none" />

  <button id="playButton"
          class="button button--primary"
          aria-controls="heroVideo"
          aria-label="Play video"
          hidden>Play</button>
</div>

<!-- Styles (example) -->
<style>
  .fullscreen-video { width: 100%; height: auto; }
  .button--primary { position:absolute; left: 1rem; bottom: 1rem; }
  @media (prefers-reduced-motion: reduce) {
    .hero-video video { display: none; }
    #fallbackGif { display: block !important; }
  }
</style>

<!-- Script -->
<script>
  (function () {
    var v = document.getElementById('heroVideo');
    var fallback = document.getElementById('fallbackGif');
    var btn = document.getElementById('playButton');

    function showFallback() {
      if (v) v.style.display = 'none';
      if (fallback) fallback.style.display = 'block';
      if (btn) btn.hidden = false;
    }

    function tryAutoplay() {
      if (!v || !v.play) return showFallback();
      v.muted = true; // important for mobile autoplay
      v.playsInline = true;
      var p = v.play();
      if (p && typeof p.then === 'function') {
        p.then(function () {
          // autoplay succeeded; keep video visible
        }).catch(function () {
          // autoplay blocked (e.g., iOS Low Power Mode)
          showFallback();
        });
      } else {
        // Older browsers
        showFallback();
      }
    }

    document.addEventListener('DOMContentLoaded', tryAutoplay);

    if (btn) {
      btn.addEventListener('click', function () {
        if (fallback) fallback.style.display = 'none';
        if (v) {
          v.style.display = '';
          v.play().catch(function(){ /* user can tap again if needed */ });
        }
        btn.hidden = true;
      });
    }
  })();
</script>

Why this works (and what to avoid)

• Progressive enhancement: first we try autoplay, and when it fails — we show a fallback or a 'Play' button. The user always sees movement or has a clear choice.
• Standards compliance: muted, playsinline, autoplay, and light preload are the minimum that works as widely as possible.
• Avoid tricks: <img> does not play MP4. If you need movement, use an animated GIF/WebP/APNG.

Optionally: embedded players (YouTube/Vimeo)

If you use iFrames, you can request muted autoplay, but the system may still block it. Therefore, always have a 'Play' button overlay or a preview image handy.

<!-- Example Vimeo -->
<iframe
  src="https://player.vimeo.com/video/12345?background=1&autoplay=1&muted=1&loop=1&playsinline=1"
  allow="autoplay; fullscreen; picture-in-picture"
  loading="lazy"
  style="width:100%;aspect-ratio:16/9;border:0"></iframe>

What you gain

With this approach, you maintain a consistent experience on iOS and desktop. You keep the design intent while playing by the rules of browsers and energy-saving constraints. The effect? Engagement even when autoplay is blocked.

Summary

Treat autoplay on Apple devices as a 'nice bonus', not a requirement. Use muted video, check the result of play(), and if blocked, show an animated preview or button. This combines performance, accessibility, and communication consistency.

If you want to support my work

If you want to support new projects or just say thank you, I would appreciate it. Just click PayPal.me — the rest will be handled securely by the PayPal system. Thanks!