Video autplay not working correctly in iOS

Bugs
1

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:

<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.

2

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.

3

Check it out. Last video is without source tag

4

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?

5

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.

6

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.

7

Yes, I thought about it but there is no way to create a custom html code that uses 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.

8

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

10

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

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:

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

@JuliusGD any feedback on my issue?

12

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?