0

Estou desenvolvendo uma página sem o uso de back-end, porém, quero que em telas desktop seja carregado um video como background usando esse código:

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

Mas quando o usuário estiver acesso via mobile/tablet quero que apareça apenas o background normal feito em css/less como o exemplo:

.test {
   background-color: black;
}

Para isso eu utilizei o código:

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

mas percebi que o usuário mobile continua fazendo o download do video para o dispositivo dele deixando o site mais pesado, como faço para que os usuários mobile não baixem o video?

1

3 Respostas 3

0

Creio que tenho uma solução melhor do que pegar pela largura absoluta da tela com javascript puro amigos.

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

      })();

Acredito que assim seja melhor pelo fato de que muitos tablets possuem resoluções de desktops 1024px ou mais de largura e também desvincula da necessidade de usar o problemático jQuery. Eu uso esse mesmo código para carregar javascripts específicos para desktop em um projeto meu, apenas alterei para puxar css, o processo que ele faz é "setar" o caminho após a verificação se é mobile ou não, para o arquivo já existente no servidor. Por ser uma função de uma função, não será "invocado" em onload na página, pois é executado automaticamente.


0

Você pode adicionar um código js (jQuery) no head, com a seguinte condição:

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

Resumindo, se a tela for menos larga que 901px, ele remove o elemento vídeo da página.

-2

Tente no seu css assim:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .