How to mark up the video on the background cross-browser?

<video autoplay loop class="fillWidth">
 <source src="video/fishermen_resting/Fishermen-Resting.mp4" type="video/mp4">Your browser does not support the video tag. I suggest you upgrade your browser.
 <source src="video/fishermen_resting/Fishermen-Resting.webm" type="video/webm">Your browser does not support the video tag. I suggest you upgrade your browser.
</video>


this layout does not run on Android eg.
June 27th 19 at 15:02
2 answers
June 27th 19 at 15:04
https://arm1.ru/blog/html5-video-kak-fon-stranitsy

With Android the hardest. AutoPlay not working. The Play button only appears if you add to the tag attribute of the video controls to display standard controls control. This, alas, is not so beautiful. But that's not all. In order for the video to start playing, you need to add additional Javascript handler that will forcibly tell the video to play:

var video = document.getElementById(element);
video.addEventListener('click',function(){
video.play();
},false);

To determine Android to add attribute controls, I just used Detect.js:

var ua = detect.parse(navigator.userAgent);
if ( ua.os.family === 'Android' ) {
 video.setAttribute( 'controls','controls' );
}

In addition, for this to work on Android, you cannot use the type attribute within source.
June 27th 19 at 15:06
Is here https://rishabhp.github.io/bideo.js/, does not load videos on cellphones while he won't do it.
And there is https://coverr.co/
My yours do not understand. - pauline_Wintheiser commented on June 27th 19 at 15:09

Find more questions by tags HTMLCSSjQueryJavaScriptLayout