Vídeo como plano de fundo !

Oi Marcelo, tudo bem?

Nunca usei video background, mas pelo que li nesse post, em mobile é complicado mesmo. Alguns sistemas operacionais bloqueiam o autoplay do HTML5 para evitar gastar muita banda do usuário.

E em alguns casos, os controles de video (play, pause) são mostrados no vídeo, o que pode arruinar a experiência do usuário.

O que pode ser feito é uma media query para detectar se for tela menor que X pixels, coloca um print do vídeo como background.

Algo assim:

@media screen and (max-device-width: 800px) {
    html {
         background: url(print-do-video.jpg) #000 no-repeat center center fixed;
    }
    #bgvid {
        display: none;
    }
}

Nesse mesmo post que mencionei, ele mostra como dar um jeitinho para IE 8, já que ele não entende HTML5.

Espero ter ajudado,

Abcs!

Natan de fato suas observações me ajudaram muito mesmo.Gostaria de expor apenas mais uma observação, no IE (desktop) o vídeo demora para abrir. A pagina é exibida sem o vídeo durante um curto tempo e logo o vídeo é exibido. segundo a documentação o a partir do IE 9 já é suportado .mp4 no IE. É necessário algum plugin ?

Marcelo,

Fico feliz que consegui te ajudar!

Realmente vi no Can I Use, que o IE9 já suporta, estranho mesmo. Achei esse post dando algumas dicas para fazer o <video> funcionar no IE8 e 9, acredito que com essas dicas funcione.

Veja no post que ele comenta de adicionar algumas linhas no seu .htaccess:

AddType video/mp4 .mp4
AddType video/webm .webm
AddType video/ogg .ogv

Aqui um usuário diz que tem que ver como o MP4 foi exportado.

Agora plugin plugin, não consegui encontrar nada com relação a essa lentidão do IE pra carregar seu video background.

Abcs

Marcelo,

Tropecei nesse plugin JS para colocar video como background. Talvez te dê uma ajuda.

https://rishabhp.github.io/bideo.js

Não esqueça de marcar uma resposta como solução para dar o tópico como solucionado.

Abcs!