HTML5 Autoplay Video in Mobile Device

Stop HTML Video Autoplay on Mobile Devices

$(document).ready only begins AFTER the page is loaded, thus the browser has already began the autoplay.

Instead, you should remove the autoplay attribute from the static HTML, and only add it then if the width is greater than 800.

<video id="background-video" loop muted>
    <source type="video/mp4" src="http://fiercefreedom.org/wp-content/uploads/2018/10/FierceCropped.mp4">
</video>

$(function() {
  var screenWidth = $(window).width();
  if (screenWidth >= 800) {
    $('#background-video').attr('autoplay', 'autoplay');
  }
});

HTML5 Video autoplay on Mobile Browser

Since the release of iOS 10 Apple has allowed muted video autoplay: https://webkit.org/blog/6784/new-video-policies-for-ios/

Chrome 53 on Android also allowing muted video autoplay: https://developers.google.com/web/updates/2016/07/autoplay

Related Topics