Video Background in Container

Elements
1

Hi,

I have a video as a background in a container which works fine on a desktop but not on a mobile.

I know this use to be an issue years ago but thought modern mobiles were now able to play video backgrounds.

Am I missing something or is there a work around?

Thanks,

John

2

Hi @johnhiggins, do you have a link to a page with the issue? :slight_smile:

3

@ben I fixed by adding the following script just before the tag:

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const vid = document.querySelector('video.w-full.h-full.object-cover');
      if (!vid) return;

      // force inline play on mobile
      vid.setAttribute('playsinline', '');
      vid.setAttribute('webkit-playsinline', '');

      // try autoplay, fallback to first tap/click
      vid.play().catch(() => {
        const playOnGesture = () => vid.play().catch(()=>{});
        document.addEventListener('touchstart', playOnGesture, { once: true });
        document.addEventListener('click', playOnGesture, { once: true });
      });
    });
  </script>

With help from ChatGPT!

4

Interesting! I think the issue here is that iOS has restrictions around autoplaying videos, especially when audio is involved. Our current solution doesn’t attempt to “trick” the browser into autoplaying a video on page load.

We may need to look into handling this more gracefully or exploring possible workarounds specific to iOS.

5

I think adding the playsinline attribute to the video tag will fix it.

1 Like
6

I’ll give that a try :smiley: