I have a video header that I only want to play on desktop, with a static image header on mobile. I can hide the video on mobile and it looks like it works fine, but the video is still being loaded in the background and slowing the page load. How can I stop the video from loading at all on mobile.

<video id="bgvid" class="hidden-xs ">    
  <source type="video/mp4" src="myvideo.mp4"></source>
</video>

<img alt="" style="width: 100%; height: auto;" src="myimage.jpg" class="visible-xs" />

I have a video header that I only want to play on desktop, with a static image header on mobile. I can hide the video on mobile and it looks like it works fine, but the video is still being loaded in the background and slowing the page load. How can I stop the video from loading at all on mobile.

<video id="bgvid" class="hidden-xs ">    
  <source type="video/mp4" src="myvideo.mp4"></source>
</video>

<img alt="" style="width: 100%; height: auto;" src="myimage.jpg" class="visible-xs" />

• javascript
• jquery
• html
• responsive-design
• html5-video

4 Answers 4

Assuming you're setting visibility via CSS, or in earlier JS code, you can do something like this:

1. Include data-src attributes instead of src on your video elements. No src to load if we don't need to.
2. If the video is visible, copy data-src to src
3. Now call .load() on the video element, to pick up the new values.

$(
  function() {
    const bgv = $('#bgvid');

    if (bgv.is(':visible')) {
      $('source', bgv).each(
        function() {
          const el = $(this);
          el.attr('src', el.data('src'));
        }
      );

      bgv[0].load();
    }
  }
)

.hidden-xs {
  display: none;
}

/* dummy criterion for demo purposes */
@media screen and (min-width: 300px) {
  .hidden-xs {
    display: block;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<video id="bgvid" class="hidden-xs " controls>
  <source type="video/mp4" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2_512kb.mp4">
  <source type="video/ogg" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2.ogv">
</video>

Or, without jQuery:

window.addEventListener("load", function() {
  const bgv = document.getElementById("bgvid");

  // what jQuery checks under the hood
  const visible = bgv.offsetWidth ||
    bgv.offsetHeight ||
    bgv.getClientRects().length;

  if (visible) {
    const children = bgv.getElementsByTagName("source");

    for (let i = 0; i < children.length; ++i) {
      children[i].src = children[i].dataset.src;
    }
  }

  bgv.load();
});

.hidden-xs {
  display: none;
}

/* dummy criterion for demo purposes */

@media screen and (min-width: 300px) {
  .hidden-xs {
    display: block;
  }
}

<video id="bgvid" class="hidden-xs" controls>
  <source type="video/mp4" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2_512kb.mp4">
  <source type="video/ogg" data-src="https://archive.org/download/UNIVAC-AD-2/UNIVAC2.ogv">
</video>

Set <video> poster attribute value to path to image file. At load event of window check conditions to determine whether or not to set .src of <video> element to path to video file.

<video poster="myimage.jpg"></video>

window.onload = function() {
  if (/* conditions */ window.innerWidth > 480) 
    document.querySelector("video").src = "myvideo.mp4";
}

This solution works for me. You can change the number "767" to any maximum pixel width of a device you would like the video not to display on. Keep in mind that this will remove all videos from mobile devices. However, you can also use a class or ID of the video tag; you just need to change the script for remove().

Script code in header:

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script> 
 $(document).ready(function() {
   if($(window).width() <= 767){

    $( "video" ).remove();
   }
});

</script>

In Body of Document:

<div class="fullscreen-bg">
    <video loop muted autoplay class="fullscreen-bg__video">
            <source src="http://yoururl.com/video.mp4" type="video/mp4">
        </video>

</div>

If you want to stop multiple videos and mute them as well with fallback img on mobile this should help out

const video = document.querySelectorAll('video')
              video.forEach(data=>{
                data.volume = 0 //mute video
                console.log(data);
                  if (window.innerWidth <= 768) {
                      data.autoplay=false;
                  } else {
                      data.play();
                  }
                })