CODEWITHSUNDEEP
androidhtmlioswordpressvideo
TokenJHog
TokenJHog

Reputation: 21

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.

enter image description here

Upvotes: 2

Views: 9958

Answers (2)

Evil Person
Evil Person

Reputation: 11

new to coding websites but when i had the same issue on my static html website i found the solution on here. Basically on mobile, videos do not autoplay unless they are muted. The code that helped is below.

    <video autoplay loop muted playsinline id="video-background" poster="images/poster.jpg">

Upvotes: 1

Kevin De Oliveira
Kevin De Oliveira

Reputation: 11

You must also enable autoPlay inside the video tag.

Note that if you are using iphone, the autoplay feature is disabled if you are in battery saving mode

Upvotes: 1

Related Questions