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?