Como Agregar Videos de Youtube Responsive en Blogger

TUTORIALES DE BLOGGER & MULTIMEDIA SEO

Cómo Instalar Vídeos de YouTube Responsivos y con Lazy Load en Blogger

Aprende a incrustar reproductores de YouTube optimizados que se adaptan a cualquier pantalla de forma automática sin perjudicar la velocidad de carga ni el SEO.

Cómo instalar vídeos de YouTube receptivos en Blogger

📋 En este artículo aprenderás:

1. Introducción y la importancia de los vídeos responsivos para el SEO
2. Implementación de estilos CSS y Script Lazy Load en el Tema
3. Estructura HTML para entradas y video tutorial oficial

1. Introducción y la Importancia de los Vídeos Responsivos para el SEO

Incorporar vídeos de YouTube receptivos o responsivos en Blogger se ha convertido en una parte fundamental de cualquier sitio web moderno. Añadir contenido audiovisual que se adapte de forma automática mejora notablemente la experiencia de los lectores (UX).

Un vídeo mal implementado reduce el valor SEO de un blog debido a que el elemento iframe tradicional cuenta con una apariencia rígida y no responsiva incapaz de ajustarse a pantallas móviles. En cambio, configurar reproductores adaptables potencia el posicionamiento gracias a la relevancia que Google otorga actualmente al formato de vídeo.

💡 VELOCIDAD Y RENDIMIENTO

El sistema con carga diferida (Lazy Load) evita que los pesados scripts de YouTube ralenticen el tiempo de carga inicial de tu página, protegiendo tu puntuación en Google PageSpeed.

2. Implementación de Estilos CSS y Script Lazy Load en el Tema

Para configurar este sistema en tu plantilla, entra a Blogger > Tema > Editar HTML y añade los códigos correspondientes:

PASO 1

Estilos CSS y Loader

Pega el código CSS antes de la etiqueta de cierre ]]></b:skin> o </style>.

PASO 2

Script Lazy Load

Pega el script JavaScript antes de la etiqueta de cierre </body> y guarda los cambios.

1. Código CSS (Contenedor Responsivo y Animación de Carga):

<style scoped="" type="text/css">
@keyframes littleShine{0%{background-position:-400px 0}100%{background-position:400px 0}}
.loader{position:relative;width:100%;float:left;overflow:hidden;height:350px;margin-right:12px;animation:littleShine .85s linear infinite;background:#f5f5f5 linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,.75) 20%,rgba(255,255,255,0) 30%);background-size:800px 100px}
.videoyoutube{text-align:center;margin:auto;width:100%}
.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}
.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
</style>

2. Script JavaScript (Carga Diferida):

<script type='text/javascript'>
//<![CDATA[
setTimeout(function(){
    if (typeof jQuery !== 'undefined') {
        $(".video-youtube").each(function(){
            $(this).replaceWith('<iframe class="video-youtube loader" src="' + $(this).data("src") + '" allowfullscreen="allowfullscreen" frameborder="0" height="281" width="500"></iframe>');
        });
    }
}, 5000);
//]]>
</script>

3. Estructura HTML para Entradas y Video Tutorial Oficial

Para insertar un vídeo dentro de cualquier entrada o página de tu blog, cambia a la pestaña Vista HTML y utiliza el siguiente fragmento:

<div class="videoyoutube">
    <div class="video-responsive">
        <div class="video-youtube loader" data-src="//www.youtube.com/embed/ID_DEL_VÍDEO"></div>
    </div>
</div>

⚠️ IDENTIFICADOR DEL VÍDEO

Reemplaza ID_DEL_VÍDEO por el código alfanumérico único que aparece al final de la URL de YouTube de tu vídeo antes de publicarlo.