wordpress视频无法在移动设备上运行

I have background videos in my website and its work correctly on pc but its not work on the mobile i tried some solution but its not work. Why ?

this code for background videos

<div class="parallax-background">
     <video loop="" muted="" autoplay="" poster="" >
          <source src="http://192.168.100.19/wordpress/wp-content/uploads/2018/08/iStock-521071485.mp4" type="video/mp4">
          <source src="http://192.168.100.19/wordpress/wp-content/uploads/2018/08/a5313d4aa7c96007b5f1f2cbb3bc6685.ogv" type="video/ogg">
          <source src="http://192.168.100.19/wordpress/wp-content/uploads/2018/08/68afede30f42dba3dc38d0478d92ea4d.webm" type="video/webm">
     </video>
</div>

And this my css code

.parallax-background {
bottom: 0;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
top: 0;
z-index: -100;
}
parallax-background {
left: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}

How to put a Video Background on a Website manually (without any plugin)?

Till now, we had a look on the method of using plugins to add a background video to a website. But we can also set a video as background manually.

One can put a video background to his WordPress website by following these steps:

1. Navigate to element of your HTML file of your website. For users having CMS like WordPress should navigate to header.php file of your theme. Make a separate div for Video and specify the source Src=” ” as Url of the video you want to display as background, for example:

<div class="video">
<video loop="" muted="" autoplay="" poster="" class="fullscreen_bg">
<source src="big_buck_bunny.mp4" type="video/mp4"></source>
</video></div>

2. The final step needs CSS to style the class holding the source video for the background for different properties of the video. For users working with a CMS like WordPress, the CSS code needs to be added in your stylesheet file (stylesheet.css). The CSS will be somewhat like:

.video {
bottom: 0;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
top: 0;
z-index: -100;
}
video {
left: 0;
position: absolute;
top: 0;
width: 100%;
}

Try this steps.

</div>

Sometime this has nothing to do with code and all to do with the "video container" of the video itself. Check the properties of the video your trying to display.

More info: https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility

I suggest making a WEBM version and adding to your video sources:

<div class="video">
    <video loop="" muted="" autoplay="" poster="" class="fullscreen_bg">
    <source src="big_buck_bunny.mp4" type="video/mp4"></source>
    <source src="big_buck_bunny.webm" type="video/webm"></source>
</video>
</div>