DEV Community

José Carlos Maciel
José Carlos Maciel

Posted on • Originally published at jcmaciel.com on

[Marketing Digital] Como otimizar sua landing page usando player do Youtube 🚀

Hoje é uma dica rápida! Se você trabalha com marketing digital, sabe o quanto uma página com carregamento rápido influencia na sua conversão.

Sei, mas qual o problema entĂŁo?

Quando usamos o código embed do Youtube ou Vimeo em nossas landing pages, a performance cai muito, ocasionando perda de tráfego ( muitos leads não esperam mais que 2 segundos para aparecer alguma coisa em seu navegador)

Direto ao ponto

1 – Substitua o código padrão do Youtube, pelo código abaixo: (troque o título e o id do vídeo)

<iframe
data-src="https://www.youtube.com/embed/IDdoSEUVideo"
srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:25px/1.5 sans-serif;color:black;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/IDdoSEUVideo?autoplay=1><img src=https://img.youtube.com/vi/IDdoSEUVideo/hqdefault.jpg alt='TĂ­tulo do Video'><span></span></a>"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
title="TĂ­tulo do Video"
></iframe>
Enter fullscreen mode Exit fullscreen mode

2 – Insira esse pequeno script javascript:

<script>
function init() { 
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
 if(vidDefer[i].getAttribute('data-src')) {
  vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
 } } } window.onload = init;
</script>
Enter fullscreen mode Exit fullscreen mode

Pronto, com essas alterações, você certamente terá uma melhora incrível no tempo de load.

Faça a medição no site GTMetrix e compare!

Até! 👊🏻

The post [Marketing Digital] Como otimizar sua landing page usando player do Youtube 🚀 appeared first on JCMaciel.com.

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

đź‘‹ Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay