Vídeo no background

[Rafael de Almeida]

Olá, boa tarde!

Tudo bom?

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:

 

https://www.w3schools.com/howto/howto_css_fullscreen_video.asp

 

 

- 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.

Esse: 

https://www.myprovence.fr/snapshots2012/en

Ou qualquer um dos 16 abaixo:

https://www.creativebloq.com/web-design/video-backgrounds-2131982

Vocês sabem como fazer isso?

 

Já agradeço antecipadamente. 

Abraços, obrigado e caso tenham essa informação só falarem.

Uma excelente semana!

[AngelCosta]

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?

[VTFerreira]

O mais simples seria utilizar um Tema de WordPress que possui o recurso que deseja e apenas inserir o endereço do vídeo. Conforme o Tema você terá que hospedar o vídeo no seu servidor/hospedagem ou utilizar um serviço de terceiros como o Youtube ou Vimeo. Se puder usar um serviço de terceiros será melhor para o seu site. Navegadores mobile não rodam vídeo como fundo, salvo engano.

[m.developer]

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 {
    width: 100%;
    height: 100%;
    position: relative;
}

.areavideo > .bg-video {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1; 
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.areavideo > .bg-video > video {
    width: 100%;
}

<div class="areavideo">
<div class="bg-video">
<video loop autoplay src="http://videoaqui.mp4"></video>
</div>
</div>

 

[Rafael de Almeida]

2 horas atrás, AngelCosta disse:

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?

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:

O mais simples seria utilizar um Tema de WordPress que possui o recurso que deseja e apenas inserir o endereço do vídeo. Conforme o Tema você terá que hospedar o vídeo no seu servidor/hospedagem ou utilizar um serviço de terceiros como o Youtube ou Vimeo. Se puder usar um serviço de terceiros será melhor para o seu site. Navegadores mobile não rodam vídeo como fundo, salvo engano.

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:

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 {
    width: 100%;
    height: 100%;
    position: relative;
}

.areavideo > .bg-video {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1; 
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.areavideo > .bg-video > video {
    width: 100%;
}

<div class="areavideo">
<div class="bg-video">
<video loop autoplay src="http://videoaqui.mp4"></video>
</div>
</div>

 

 

1 hora atrás, m.developer disse:

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 {
    width: 100%;
    height: 100%;
    position: relative;
}

.areavideo > .bg-video {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1; 
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.areavideo > .bg-video > video {
    width: 100%;
}

<div class="areavideo">
<div class="bg-video">
<video loop autoplay src="http://videoaqui.mp4"></video>
</div>
</div>

 

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

[m.developer]

14 minutos atrás, Rafael de Almeida 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

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

assim:

<head>
<style>
CSS AQUI
</style>
</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

[Rafael de Almeida]

2 horas atrás, m.developer 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

assim:

<head>
<style>
CSS AQUI
</style>
</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

Show! Muitíssimo obrigado! Hoje você fez uma boa ação! Encerrou uma busca de uma semana rs Sem palavras! Vou testar e logo respondo por aqui se deu certo. Forte abraço!

[m.developer]

18 minutos atrás, Rafael de Almeida disse:

Show! Muitíssimo obrigado! Hoje você fez uma boa ação! Encerrou uma busca de uma semana rs Sem palavras! Vou testar e logo respondo por aqui se deu certo. Forte abraço!

de nada amigo, fico feliz estar ajudando, testa ai :) estamos sempre aqui

[Rafael de Almeida]

22 horas atrás, m.developer disse:

de nada amigo, fico feliz estar ajudando, testa ai :) estamos sempre aqui

Obrigado m.developer! Vou testar esse final de semana e já mando por aqui. Forte abraço

[Joel Emanoel]

Em 30/01/2018 em 12:19, m.developer disse:

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 {
    width: 100%;
    height: 100%;
    position: relative;
}

.areavideo > .bg-video {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -999; 
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.areavideo > .bg-video > video {
    width: 100%;
}

<div class="areavideo">
<div class="bg-video">
<video loop autoplay src="http://videoaqui.mp4"></video>
</div>
</div>

 

Só uma dica, coloque z-index: -999; pois caso tenha outros objetos acima do seu, ele ainda não ficará por baixo.