# Video autplay not working correctly in iOS

**URL:** <https://forum.builder.io/t/video-autplay-not-working-correctly-in-ios/6321>\
**Category:** Bugs\
**Tags:** visual-editor\
**Created:** [September 5, 2024, 11:33pm UTC](https://forum.builder.io/t/video-autplay-not-working-correctly-in-ios/6321 "2024-09-05T23:33:47Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![alexookah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/alexookah/32/4080_2.png) [@alexookah](https://forum.builder.io/u/alexookah)\
**Post date:** [September 5, 2024, 11:33pm UTC](https://forum.builder.io/t/video-autplay-not-working-correctly-in-ios/6321/1 "2024-09-05T23:33:47Z")

</div>

We’re encountering an issue with the video element when using an uploaded MP4 or WebM asset. The video autoplay feature is not working correctly in iOS Safari and Chrome.

The generated code when adding a video in the visual editor looks like this:

```auto
<video autoplay muted controls playsinline loop class="cvqchck">
  <source type="video/mp4" src="...">
</video>

```

However, when we use a direct `src=""` attribute in the video tag without the `<source />` element, the autoplay works correctly. There seems to be a dependency on the order of attributes, specifically with `muted` needing to be placed before `autoplay` to ensure proper functionality. We’re not entirely sure if this would fix the issue, though.

Ensuring autoplay functionality on iOS Safari and Chrome is critical. Please investigate this issue.

---

<div class="post-metadata">

**Author:** ![JuliusGD](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/juliusgd/32/2523_2.png) [@JuliusGD](https://forum.builder.io/u/JuliusGD)\
**Post date:** [September 6, 2024, 1:42pm UTC](https://forum.builder.io/t/video-autplay-not-working-correctly-in-ios/6321/2 "2024-09-06T13:42:18Z")

</div>

Hello @alexookah

Would you be able to share with me the Public URL Of the page where you are experiencing the issue? I may be able to provide better guidance if I’m able to work with the video block.

---

<div class="post-metadata">

**Author:** ![alexookah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/alexookah/32/4080_2.png) [@alexookah](https://forum.builder.io/u/alexookah)\
**Post date:** [September 6, 2024, 2:54pm UTC](https://forum.builder.io/t/video-autplay-not-working-correctly-in-ios/6321/3 "2024-09-06T14:54:02Z")

</div>

> **[Die Lebenden - Opera | Petros Leivadas](https://petrosleivadas.com/projects/die-lebenden-opera/)**
>
> "Die Lebenden" blends two singers, synthesizers, percussion, lights, and video into a unique operatic experience.

Check it out. Last video is without source tag

---

<div class="post-metadata">

**Author:** ![JuliusGD](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/juliusgd/32/2523_2.png) [@JuliusGD](https://forum.builder.io/u/JuliusGD)\
**Post date:** [September 6, 2024, 4:10pm UTC](https://forum.builder.io/t/video-autplay-not-working-correctly-in-ios/6321/4 "2024-09-06T16:10:35Z")

</div>

Hello @alexookah

Just for clarification, I’d like to understand the workflow:  
You used the Visual Copilot to generate code, that code contained a video, but the generated code output did not work.You manually had to insert a Builder media component to render the video. Is this correct?

---

<div class="post-metadata">

**Author:** ![alexookah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/alexookah/32/4080_2.png) [@alexookah](https://forum.builder.io/u/alexookah)\
**Post date:** [September 6, 2024, 4:58pm UTC](https://forum.builder.io/t/video-autplay-not-working-correctly-in-ios/6321/5 "2024-09-06T16:58:47Z")

</div>

All the video elements on the page URL I provided were generated using the Visual Editor (Media → Video), except for the last one. Unfortunately, autoplay is not working on iOS Safari and Chrome.

To test the autoplay functionality, I added another video using the code element (which is the last one on the page). In my custom code, I didn’t include a `<source>` element, but instead used a direct `src="https://remote_file.mp4"`. This approach demonstrated that autoplay works correctly on iOS for both Safari and Chrome.

---

<div class="post-metadata">

**Author:** ![JuliusGD](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/juliusgd/32/2523_2.png) [@JuliusGD](https://forum.builder.io/u/JuliusGD)\
**Post date:** [September 10, 2024, 2:08pm UTC](https://forum.builder.io/t/video-autplay-not-working-correctly-in-ios/6321/6 "2024-09-10T14:08:29Z")

</div>

Hello alexookah,

I’ve been able to confirm that iOS devices have a browser limitation related to the source attribute.

The current workaround is to embed the video without the source element until the browser supports autoplay w/ source elements.

---

<div class="post-metadata">

**Author:** ![alexookah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/alexookah/32/4080_2.png) [@alexookah](https://forum.builder.io/u/alexookah)\
**Post date:** [September 10, 2024, 2:28pm UTC](https://forum.builder.io/t/video-autplay-not-working-correctly-in-ios/6321/7 "2024-09-10T14:28:21Z")

</div>

Yes, I thought about it but there is no way to create a custom html code that uses [builder.io](http://builder.io) assets mp4/webm. I tried copy pasting the src file and I got an error.  
I have to upload my assets in another service and create the video src elements via custom code. That’s quite incovininent for video background code.

---

<div class="post-metadata">

**Author:** ![JuliusGD](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/juliusgd/32/2523_2.png) [@JuliusGD](https://forum.builder.io/u/JuliusGD)\
**Post date:** [September 10, 2024, 3:13pm UTC](https://forum.builder.io/t/video-autplay-not-working-correctly-in-ios/6321/8 "2024-09-10T15:13:04Z")

</div>

Can you share with me the name of the video in your asset manager you would like to embed with autoplay?

---

<div class="post-metadata">

**Author:** ![alexookah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/alexookah/32/4080_2.png) [@alexookah](https://forum.builder.io/u/alexookah)\
**Post date:** [September 10, 2024, 10:23pm UTC](https://forum.builder.io/t/video-autplay-not-working-correctly-in-ios/6321/10 "2024-09-10T22:23:23Z")

</div>

The name of the file is: `die_lebenden_insta_2.webm`

It loads in chrome but not in safari.  
 ![Screenshot 2024-09-11 at 01.22.29](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/4/4281cc4e8a7cf602ecf4655874e3b5a169fd5115.png)

If I try to open the file directly in safari, it’s not loading and shows this error in console: `Failed to load resource: Plug-in handled load`

html code I used:

```auto
<video autoplay muted controls playsinline loop src="https://cdn.builder.io/o/assets.....&alt=media&optimized=true"></video>

```

---

<div class="post-metadata">

**Author:** ![alexookah](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/alexookah/32/4080_2.png) [@alexookah](https://forum.builder.io/u/alexookah)\
**Post date:** [September 18, 2024, 12:11pm UTC](https://forum.builder.io/t/video-autplay-not-working-correctly-in-ios/6321/11 "2024-09-18T12:11:29Z")

</div>

@JuliusGD any feedback on my issue?

---

<div class="post-metadata">

**Author:** ![JuliusGD](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/juliusgd/32/2523_2.png) [@JuliusGD](https://forum.builder.io/u/JuliusGD)\
**Post date:** [September 24, 2024, 2:37pm UTC](https://forum.builder.io/t/video-autplay-not-working-correctly-in-ios/6321/12 "2024-09-24T14:37:05Z")

</div>

Hello alexookah,

Apologies for the delay in response. Are you still experiencing issues with the video in Safari? Would you mind letting me know if this is just in the Visual Editor or also on the Draft Preview/Live Site? Also, is this on Mobile or Desktop?
