Search code examples
csshtmlvideomobilesmartphone

Disable HTML5 video autoplay only on smartphone

I have a full-width video background on a website with the autoplay attribute. It works fine.

On the smartphone device however, I don't want to display this video. So I use the css : display:none;

But the video is still downloaded by firefox on smartphone... The video does not appear but it is still downloaded in cache...

How can I fix that? Is there a solution to disable the autoplay on the little screen and keep it on the larger device?

Solution

  • HTML

    <video controls autoplay>
  <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4">
</video>

    Javascript:

    $(document).ready(function(){
  var screenWidth = $(window).width();
  // if window width is smaller than 800 remove the autoplay attribute
  // from the video
  if (screenWidth < 800){
        $('video').removeAttr('autoplay');
  } else {
    $('video').attr('autoplay');
  }
});

    JSFiddle: https://jsfiddle.net/rowj0sae/