How to determine what will be loaded in HTML?

Question

I’m developing a page without the use of back-end, however, I want to upload a video as background using this code:

<div class="test">
  <video poster="img/videoposter.png" id="header-video" playsinline autoplay muted loop>
    <source src="img/background-video.mp4" type="video/mp4">
  </video>
</div>

But when the user is accessing via mobile/tablet, I want only the normal css/Less background to appear as the example:

.test {
   background-color: black;
}

For that I used the code:

@media (max-width: 991px) {
    #header-video {
        display: none;
    }
}

but I noticed that the mobile user keeps downloading the video to his device leaving the site heavier, how do I so that mobile users do not download the video?

Answer 1

You can add a js code (jQuery) to the head, with the following condition:

if($(window).width() < 901){
   $("#header-video").remove();
}

In short, if the screen is less wide than 901px, it removes the video element from the page.

Answer 2

I believe I have a better solution than picking up by the absolute width of the screen with pure javascript friends.

(function isMobile(){
        var userAgent = navigator.userAgent.toLowerCase();
        if( userAgent.search(/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up\.browser|up\.link|webos|wos)/i)!= -1 ){

        }else{
            //Seu código para desktop

            function carregacss(filename){
            var fileref=document.createElement("style");
            fileref.setAttribute("type","text/css");
            fileref.setAttribute("href", filename);

            document.getElementsByTagName("head")[0].appendChild(fileref);
            }
            //Aqui vc carrega o css específico do mobile, vc pode transportar esse código para o if e puxar apenas o específico para mobile...
            carregacss("CAMINHO/arquivoDesktop.css", "css");
            }

      })();

I think this is better because many tablets have desktop resolutions 1024px or more wide and also unlinks the need to use the problematic jQuery. I use this same code to load specific desktop Avascripts in a project of mine, just changed to pull css, the process it does is "set" the path after checking whether it is mobile or not, to the existing file on the server. Because it is a function of a function, it will not be "invoked" in onload on the page, as it runs automatically.

---

Answer 3

Try in your css like this:

  @media (max-device-width: 991px) {
    #header-video {
        display: none;
    }
}