Video background not displayed on mobile

[MaximShield]

Hi

I have a video background in a Div, it works fine on desktop and at all break points on desktop but doesn’t work when I load it on my phone.

Its a link from Youtube.

Cheers

[xRae]

Most mobile browsers require the video to be muted and inline to allow auto-play.

muted defaultMuted playsinline

Not sure if you can add those to a YouTube video embed. I always self-host, and add those three to the video code.

[MaximShield]

Ah ok, thanks, I’ll have a look into that.

[tristup]

Hi Max,

Glad that you already get an insight into it. Please let us know how it works for you.

Thanks

[MaximShield]

How can I add this to the video code?

Cheers,

[MaximShield]

I made it work by hosting the video myself as suggested. I added this code to the Global JS to get it working on IOS… As taken from a super long feed on the forum somewhere!

    // Force the Hero Video to PlayInline
const $videos = [...document.querySelectorAll(".x-video.player script")];    
$videos.map( video => {
    video.innerText = video.innerText.replace(" muted>"," muted playsinline>");
});

[prakash_s]

Hello Max,

Thanks for sharing the information it might be helpful for the other customers as well. Please feel free to open a new thread if you have any more concerns.

Thanks