# Video Background in Container

**URL:** <https://forums.realmacsoftware.com/t/video-background-in-container/47420>\
**Category:** Elements\
**Created:** [May 6, 2025, 3:14pm UTC](https://forums.realmacsoftware.com/t/video-background-in-container/47420 "2025-05-06T15:14:56Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![johnhiggins](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/johnhiggins/32/33610_2.png) [@johnhiggins](https://forums.realmacsoftware.com/u/johnhiggins)\
**Post date:** [May 6, 2025, 3:14pm UTC](https://forums.realmacsoftware.com/t/video-background-in-container/47420/1 "2025-05-06T15:14:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [May 6, 2025, 4:03pm UTC](https://forums.realmacsoftware.com/t/video-background-in-container/47420/2 "2025-05-06T16:03:07Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![johnhiggins](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/johnhiggins/32/33610_2.png) [@johnhiggins](https://forums.realmacsoftware.com/u/johnhiggins)\
**Post date:** [May 6, 2025, 4:15pm UTC](https://forums.realmacsoftware.com/t/video-background-in-container/47420/3 "2025-05-06T16:15:15Z")

</div>

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

```auto
  <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!

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [May 6, 2025, 6:04pm UTC](https://forums.realmacsoftware.com/t/video-background-in-container/47420/4 "2025-05-06T18:04:23Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![johnhiggins](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/johnhiggins/32/33610_2.png) [@johnhiggins](https://forums.realmacsoftware.com/u/johnhiggins)\
**Post date:** [May 7, 2025, 8:49am UTC](https://forums.realmacsoftware.com/t/video-background-in-container/47420/5 "2025-05-07T08:49:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [May 7, 2025, 9:52am UTC](https://forums.realmacsoftware.com/t/video-background-in-container/47420/6 "2025-05-07T09:52:25Z")

</div>

I’ll give that a try 😃