Video Background Autoplay not working on Mobile (Wordpress)

I am trying to get a background video to play when a user visit the homepage of my wordpress website, however, the video only autoplays when visiting the desktop version. Also, when I preview the website via wordpress using the device VM it shows it is autoplaying, but when I visit the domain website on my mobile device it does not autoplay.

Is it possible that you are unable to autoplay a video on mobile devices?

The javascript below checks to see if the user is using a moblie device or desktop. If the user is using a mobile device the mobile friendly version of the video will display, otherwise the desktop version will display:

<script> 
if (navigator.userAgent.match(/Android/i) 
  || navigator.userAgent.match(/webOS/i) 
  || navigator.userAgent.match(/iPhone/i)  
  || navigator.userAgent.match(/iPad/i)  
  || navigator.userAgent.match(/iPod/i) 
  || navigator.userAgent.match(/BlackBerry/i) 
  || navigator.userAgent.match(/Windows Phone/i)) { 
    jQuery(document).ready( function($) { $('body').prepend('<div class="video-bg-container"><video autoplay="autoplay" loop="loop" muted defaultMuted playsinline class="bg-video"><source src="MOB-1.mp4" type="video/mp4"></video></div>'); });
}else { 
   jQuery(document).ready( function($) { $('body').prepend('<div class="video-bg-container"><video autoplay="autoplay" loop="loop" muted defaultMuted playsinline class="bg-video"><source src="DSK.mp4" type="video/mp4"></video></div>'); });
}

</script>

Any information you might have on the topic would be greatly appreciated. Thanks.

Update

I am running the tests on an IPhone 11 Max Pro. Here is the Codec Information. The file is MP4 with H264.