How to determine what will be loaded in HTML?

Navigation
0

I'm developing a page without the use of a back-end, however, I want a background video to be loaded on desktop screens 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 access via mobile / tablet I want to appear only the normal background done in css / less as the example: 

.test {
   background-color: black;
}

For this I used the code: 

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

But I noticed that the mobile user continues to download the video to his device, leaving the site heavier, how do I prevent mobile users from downloading the video?

    
asked by anonymous 21.01.2017 / 18:35

3 answers

0

I think I have a better solution than catching 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 of the fact that many tablets have 1024px or larger desktop resolutions and also disassociates from the need to use the problematic jQuery. I use this same code to load desktop-specific javascripts into a project of mine, just changed it to pull css, the process it does is to "set" the path after checking whether it is mobile or not, for the file already on the server. Because it is a function of a function, it will not be "invoked" in onload on the page because it runs automatically.

24.01.2017 / 19:01
0

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

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

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

    
21.01.2017 / 19:14
-2

Try your css like this: 

  @media (max-device-width: 991px) {
    #header-video {
        display: none;
    }
}
    
24.01.2017 / 19:24
How to return data array with join in Laravel with DB class? Remove the focus / outline from the input (CSS)