-1

Como utilizar background video diferentes por tamanho de tela , Desktop seria um <video> Mobile seria outro <video>

Projeto em Angular ..

<video playsinline="playsinline" autoplay="autoplay" loop">
      <source src="../assets/HomeBack.mp4" type="video/mp4" >
    </video>

<video playsinline="playsinlineMobile" autoplay="autoplay" loop">
      <source src="../assets/HomeBackMobile.mp4" type="video/mp4" >
    </video>

2 Respostas 2

2

Cara vc pode ter um simples @media para mostrar um e esconder o outro.

inserir a descrição da imagem aqui

.mobile {
    display: none;
}

@media (max-width:768px) {

    .mobile {
        display: block;
    }

    .desktop {
        display: none;
    }

}
<video class="desktop" width="400" nocontrols autoplay muted>
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
<video class="mobile" width="400" nocontrols autoplay muted>
    <source src="https://www.w3schools.com/html/movie.mp4" type="video/mp4">
</video>

-2

Você pode esta utilizando o media queries do css. Exemplo:

.teste {
    margin-left: 0px;
}
@media (min-width: 992px) {
   .teste {
     margin-left: -211px;
   }
}

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 .