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.

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

đź‘‹ Kindness is contagious

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

Okay