Остановить автозапуск HTML-видео на мобильных устройствах

Question

На настольной версии моего сайта видео автоматически воспроизводится в фоновом режиме.Мне бы хотелось, чтобы видео не воспроизводилось автоматически на мобильном устройстве (например, если ширина экрана <800), чтобы оно не загружалось.По какой-то причине я не могу заставить это видео перестать автоматически воспроизводиться с помощью javascript.Вот соответствующий текст: </p>

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

$(document).ready(function(){
  var screenWidth = $(window).width();
  if (screenWidth < 800){
		$('#background-video').removeAttr('autoplay');
  } else {
  	$('background-video').attr('autoplay');
  }
});

Answer 1

$(document).ready начинается только ПОСЛЕ загрузки страницы, поэтому браузер уже начал автозапуск.

Вместо этого вы должны удалить атрибут autoplay из статического HTML и добавлять его только тогда, еслиширина больше 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');
  }
});