0

I'm trying to add a video in the background of the site, everything works in the computer browser even with the responsive one

But when I open the site on my cell phone I don't see the video.. There is a black screen instead

#myVideo {
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}
<video autoPlay muted loop id="myVideo">
<source src="https://firebasestorage.googleapis.com/v0/b/lumpinee-429bb.appspot.com/o/sd.mp4?alt=media&token=c971004a-30bd-4b8d-8d3b-e62af29bd1ae" type="video/mp4" />
            </video>

I work with react

Thank you

user14918901
  • 11
  • 3

1 Answers1

0

Your videos will not play automatically in most browsers because they are not allowed! Autoplaying videos is quite a complex issue as many browsers are fighting against it as it can be used to create a bad user experience.

You can find information about this at this site ( https://cunghoidap.com/autoplay-video-not-working-on-mobile ).

A user action is required to autoplay the video. I found a solution for this problem using jquery.

#JS

var isplayavideo = 0;

$('body').on('touchstart',function(){
    if (document.getElementById("video").paused) {
    document.getElementById("video").play();
        isplayavideo = 1; 
    }
});

You can also check these topics.

WEB Mobile: Autoplay video with no controls

Emre Karadağ
  • 106
  • 1