Stop video from loading in background on mobile

Question

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" />

Paul Roub · Accepted Answer · 2020-05-14T13:31:41.230

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

Include data-src attributes instead of src on your video elements. No src to load if we don't need to.
If the video is visible, copy data-src to src
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>

score 4 · Answer 2 · answered May 15 '17 at 16:45

4

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";
}

answered May 15 '17 at 16:45

guest271314

1
15
104
177

This solution always displays the poster image. – Harry Robinsob May 15 '17 at 17:53
@HarryRobinsob Yes, poster image is displayed until user or `javascript` begins playback of video. – guest271314 May 15 '17 at 17:56

score 2 · Answer 3 · edited May 24 '19 at 15:40

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>

Thanks for posting this answer, but be aware that posts including an **unsolicited commercial advertisement** can get deleted as spam. For more see [What is the exact definition of “spam” for Stack Overflow?](https://meta.stackoverflow.com/q/260638). I've edited that portion out for now. — 4b0, May 24 '19 at 15:46

score 0 · Answer 4 · answered Jul 29 '21 at 17:45

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();
                  }
                })

Stop video from loading in background on mobile

4 Answers4

Linked