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.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs