0

Meu site tem como bg um vídeo que está em autoplay.

Porém, quando está em mobile, quero que este vídeo não rode, deixando apenas em pause para aparecer uma imagem de fundo.

Se eu coloco display:none no CSS ele fica um bg preto.

<video nocontrols muted autoplay loop>
    <source src="video1.mp4" type="video/ogg">
    <source src="video1.mp4" type="video/mp4">
    <object data="video1.mp4"></object>
</video>

e no CSS mobile:

video{ display:none }

Alguma sugestão?

2
  • <video nocontrols muted autoplay loop> <source src="video1.mp4" type="video/ogg"> <source src="video1.mp4" type="video/mp4"> <object data="video1.mp4"></object> </video> e no CSS mobile: video{ display:none } Levando em conta que cada pagina do site é um video diferente do outro.
    – user8906
    Commented 23/05/2014 às 18:15
  • 2
    Você pode tirar o autoplay fixo da tag. E ao iniciar a tela, por javascript controlar se deve ou não dar autoplay no vídeo.
    – Wakim
    Commented 23/05/2014 às 19:22

1 Resposta 1

1

Use CSS Media types para fazer a diferença entre mobile e desktop. remova a diretiva loop da tag e utilize Javascript (jQuery para facilitar) para colocar o atributo quando necessário.

Exemplos:

Html5 video loop e Jquery

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