Como Por Vídeo do Youtube com Logo Não Clicável em seu Site

É muito comum estar lançando mão de vídeos em páginas de venda. Um vídeo bem elaborado ajuda a melhorar a conversão da página de vendas, e o site de Vídeos mais usado nesses casos é o Youtube. Porém o Youtube deixa uma logo clicável em seu player. Isso significa que alguém pode clicar na logo e ir para o site do Youtube, e lá se perder no meio de outros vídeos e acabar não comprando o produto que você está promovendo. Também é possível que o visitante encontre outro vídeo com outro link de afiliado e você acabe perdendo a venda para outrem.

Dado esse problema, a seguir nesse artigo vou lhe mostrar como fazer para resolver esse problema. Vou lhe mostrar como por vídeo do Youtube com logo não clicável em seu site.

Por exemplo, veja esse vídeo abaixo, e tente clicar na Logo:

Ainda aqui? Pois é, não conseguiu clicar na logo né!. Para aprender como fazer isso em seus projetos, continue lendo…

Tornando o logo do Vídeo não Clicável

Quando você pega um código Embed do youtube, ele será mais ou menos igual a esse:

1
<iframe width="560" height="315" src="https://www.youtube.com/embed/W1gQUjXO4lU" frameborder="0" allowfullscreen></iframe> 
<iframe width="560" height="315" src="https://www.youtube.com/embed/W1gQUjXO4lU" frameborder="0" allowfullscreen></iframe> 

Note que eu Ocultei também o título, players e mandei não exibir vídeos relativos. Isso tudo você faz nas opções lá do próprio youtube na página de obtenção do código Embed para compartilhamento

Para que a logo não fique clicável, você deve utilizar dois divs, um que conterá o código embed do youtube e outro que ficará abaixo do código embed dele. Veja o exemplo abaixo:

Atualmente, o youtube anda meio bugado, não obedecendo as configurações pra não exibir o título por exemplo, nesse caso, faz-se necessário trabalhar com três div. O div extra ficará no topo e impedirá que o título fique clicável. Veja abaixo o código:

1
2
<div style="position:absolute;top:0px;left:0px;width:100%;height:33%;z-index:77777777777"></div>
<div style="position:relative"> <iframe width="560" height="315" src="https://www.youtube.com/embed/W1gQUjXO4lU?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe> <div style="position:absolute;bottom:1px;right:1px;width:100%;height:37%;z-index:77777777777"></div> </div>  
<div style="position:absolute;top:0px;left:0px;width:100%;height:33%;z-index:77777777777"></div>
<div style="position:relative"> <iframe width="560" height="315" src="https://www.youtube.com/embed/W1gQUjXO4lU?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe> <div style="position:absolute;bottom:1px;right:1px;width:100%;height:37%;z-index:77777777777"></div> </div>	

Mas o que Foi feito aí Anderson?
R: Então caro amigo, você simplesmente criou um div, limitou o tamanho dele em proporções para que seja responsivo, definiu a posição dele como absoluta e usou o z-index para forçar ele ficar na frente do vídeo. Então quando o visitante clica na logo, na verdade ela está clicando no div que você criou, e por isso nada acontece! É possível também colocar um link no div e lançar o visitante para qualquer url que você desejar em vez do Youtube 😉

Como fazer isso no Optimizepress

Creio que essa técnica possa ser feita com diversos sistemas de criação de páginas de vendas, inclusive a seguir vou mostrar como você pode Fazer isso no Optimizepress.

O Processo para se fazer isso em uma página criada com o Optimizepress é muito simples. Após inserir o elemento do vídeo, no LiveEditor, clique no ícone de Engrenagem do Elemento do Vídeo e preencha conforme a imagem abaixo:

Como inserir video do youtube com logo nao clicavel

Pronto, agora é só salvar e ser Feliz! 🙂

O Código que vai no primeiro Campo (Código antes do Elemento) é esse:

1
2
<div style="position:relative"> 
<div style="position:absolute;top:0px;left:0px;width:100%;height:33%;z-index:77777777777"></div>
<div style="position:relative"> 
<div style="position:absolute;top:0px;left:0px;width:100%;height:33%;z-index:77777777777"></div>

O Código que vai no segundo Campo (Código depois do Elemento) é esse:

1
<div style="position:absolute;bottom:1px;right:1px;width:100%;height:37%;z-index:77777777777"></div> </div> 
<div style="position:absolute;bottom:1px;right:1px;width:100%;height:37%;z-index:77777777777"></div> </div> 

Conclusão

Bom, essa foi uma dica rápida, mas que pode ajudar a aumentar sua conversão, ajudando-o a não perder visitantes dispersos em vídeos tantos do Youtube.

Se gostou da dica, inscreva-se aqui do lado ~> para receber novidades por email, compartilhe esse artigo e deixe seu comentário! 🙂

Fique com Deus e até o próximo artigo!

Como Por Vídeo do Youtube com Logo Não Clicável em seu Site
4.8 (95.22%) 134 votes

25 Comments

  1. George Franklin janeiro 19, 2017
    • anderson fevereiro 5, 2017
  2. erick gabriel costa de almeida janeiro 19, 2017
    • anderson fevereiro 5, 2017
  3. Ronaldo Costa janeiro 19, 2017
    • anderson fevereiro 5, 2017
  4. Carlos Roberto janeiro 19, 2017
    • anderson fevereiro 5, 2017
  5. Sergio Moraeas janeiro 19, 2017
    • anderson fevereiro 5, 2017
  6. Junior fevereiro 11, 2017
  7. Jeferson abril 15, 2017
    • anderson abril 24, 2017
  8. paulo setembro 14, 2017
  9. Elvis Lion janeiro 17, 2018
  10. Graciella Neves março 8, 2018
    • Anderson abril 12, 2018
  11. Ricardo abril 7, 2018
    • Anderson abril 12, 2018
  12. Rafael Braga maio 22, 2018
  13. Andre julho 10, 2018
    • Anderson julho 11, 2018
  14. Diego setembro 3, 2018
  15. José setembro 14, 2018

Leave a Reply