Background video is not playing in safari browser on mobile and desktop

Question

I have converted the video into 3 formats such as .mp4, .webm, .gov But still background video is not playing in safari browser

<video autoplay="" muted="" loop="" id="myVideo">
    <source src="videos/2.0-Welcome-to-DISTRO_1 (1).ogv" type="video/ogv">
     <source src="videos/2.0-Welcome-to-DISTRO_1 (1).webm" type="video/webm">
    <source src="videos/2.0-Welcome-to-DISTRO_1 (1).mp4" type="video/mp4">
    </video>

page url is http://gnxtsystems.com/cookie-test/

Please help me to fix it. Thanks in advance.

Solution 1

Try these two things..

add playsinline attribute in video tag like this

<video class="video-background" autoplay loop muted playsinline>

and secondly for apple devices you will have to turn off the low power mode.

then check...it will work

Solution 2

It's quite simple if you are using it in React. You just need to enable it to play inline and disable "picture in picture" feature.

<video className="background-video" loop autoPlay playsinline="true" disablePictureInPicture="true">

Solution 3

It might be because of the mime type. Try only mp4 file. And for some reason, videos would not play on iPad unless I set the controls="true" flag. Example: This worked for me on iPhone but not iPad.

<video loop autoplay width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>

And this now works on both iPad and iPhone:

<video loop autoplay controls="true" width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>

Comments

[Sonu Tyagi]

I tried what you said, but still background video is not plying.

[Sonu Tyagi]

poster="images/video.png" this attribute is also not working

[JoelBonetR]

So maybe you've something els wrong. The example i shared is from my website and is working nice on Safari. Add a snippet with your HTML and your CSS related to video background

[Ryan Simmons]

I wasn't in React for my project, but you got me close enough. The "disablePictureInPicture" attribute was what I needed. This was my winning combination for mobile Safari: "<video autoplay loop muted playsinline disablepictureinpicture preload="auto">"