Vídeo no background - Design & Development - Portal do Host
By Rafael de Almeida, January 30, 2018 in Design & Development
Sou praticamente leigo no Wordpress, porém já sei fazer algumas coisas básicas, como inserir slides, menus entre outros...
Estou com uma dúvida imensa que já me acompanha a uma semana: "Como colocar vídeo no background do site?"
Pesquisei em diversos fóruns, comunidades no facebook, vídeos e tutoriais internacionais. Porém, ainda não estou conseguindo. De certa maneira consegui com um plugin (MB tplayer), mas ainda assim não foi o resultado esperado (pois no site faz a propaganda do plugin). Também soube que pelo Visual Composer, mas não aprendi a mexer.
O mais próximo que consegui, foi por um código HTML que consegui nesse link:
- Porém, não sei mexer direito em código HTML, e na hora de inspecionar o elemento não sei classificar exatamente onde é no editor (se é que tem uma maneira exata de saber). Além de que, não sei onde exatamente coloco o código HTML no editor do Wordpress (se é no header, cabeçalho, na parte inicial, ou outra parte). A outra dúvida, é que o código CSS não sei onde coloco. Se é embaixo do código HTML ou em outro local.
Na realidade, nessa parte do código HTML e CSS é a que mais interessa, pois em teoria (caso não esteja errado), acredito que ficaria independente de plugins e temas para essa função.
Em resumo.... Vocês sabem como colocar vídeo ao fundo do site? Pode ser por plugins, temas que possibilitem, ou HTML e CSS.
Vou mandar alguns modelos que gostaria de fazer.
Ou qualquer um dos 16 abaixo:
https://www.creativebloq.com/web-design/video-backgrounds-2131982
Vocês sabem como fazer isso?
Abraços, obrigado e caso tenham essa informação só falarem.
Já tentou editar direto o código: https://premium.wpmudev.org/blog/add-video-background/
Não rola de comprar o plugin pra ele deixar de mostrar a propaganda do desenvolvedor? Qual o tamanho do vídeo? É pro página toda?
Tem que levar em consideração se vai valer a pena para o usuário, usar video como background tem que ser em um situação bem especifica, mas enfim. tente +- isso
.areavideo {
.areavideo > .bg-video {
.areavideo > .bg-video > video {
<div class="areavideo">
<video loop autoplay src="http://videoaqui.mp4"></video>
Obrigado Angel, irei testar. A ideia é colocar o vídeo no topo da página. O vídeo em si ainda não escolhi, tenho só uma leve ideia de como seria, e por isso estou sem o tamanho. O plugin comprado vou deixar como última opção por enquanto, queria ver se conseguia fazer por HTML e CSS primeiro. Muito obrigado pela dica e mais uma vez obrigado por me apresentar o fórum! Abraço
2 horas atrás, VTFerreira disse:
VTFerreira, muito obrigado pela dica! Fico pensando muito nessa questão da usabilidade, mas foi um pedido do próprio cliente, então queria fazer um teste para ele ver se aprova na versão mobile. Eu procurei um tema com essa função, mas por enquanto ainda não encontrei. Vou dar uma olhada melhor! Muito obrigado pelas informações VTFerreira, abraço e uma ótima semana!
1 hora atrás, m.developer disse:
Poxa, muito obrigado m.developer! Vou tentar sim. Uma última dúvida: Sou iniciante no HTML e CSS, no editor, onde exatamente coloco esse código? É na parte do cabeçalho? Em um tutorial vi que tinha que inspecionar o elemento do site na parte que quero que o vídeo fique, mas quando vou no editor HTML do Wordpress não consigo encontrar. Sabe a partir da onde coloco o código? Abraços e muito obrigado pela informação
14 minutos atrás, Rafael de Almeida disse:
De nada amigo, então.. eu não trabalho com wordpress, nao tenho noção nenhum desse painel, mas provavelmente deve ter alguma area para colocar codigos, ai tu teria que dar um google sobre onde coloca isso no wordpress, o css tu pode colocar dentro do head
o html tu nao pode fazer isso, Como te falei, não trabalho com wordpress ou afins.., no google tu deve encontrar algo, quando encontrar onde coloca no wordpress, tu bota o meu codigo, vai funcionar
18 minutos atrás, Rafael de Almeida disse:
de nada amigo, fico feliz estar ajudando, testa ai :) estamos sempre aqui
22 horas atrás, m.developer disse:
Em 30/01/2018 em 12:19, m.developer disse:
Só uma dica, coloque z-index: -999; pois caso tenha outros objetos acima do seu, ele ainda não ficará por baixo.