Cómo hacer que tus videos sean responsivos en Blogger

📺 Cómo hacer que tus videos en Blogger sean responsivos

En el mundo digital actual, la adaptabilidad es clave para brindar una experiencia óptima a los usuarios en cualquier dispositivo: computadora, tableta o móvil. Si eres creador de contenido en Blogger, es fundamental que tus videos se adapten a todas las pantallas sin perder calidad. En este tutorial aprenderás a lograrlo fácilmente con un poco de CSS y un truco sencillo al insertar tus videos.

🔹 Paso 1: Agregar el código CSS en tu plantilla

Este código hará que cualquier video se ajuste automáticamente al ancho de la pantalla. Debes pegarlo en tu plantilla de Blogger:

  1. Entra en Blogger > Tema.
  2. Haz clic en Editar HTML.
  3. Busca la etiqueta ]]></b:skin>.
  4. Justo antes de esa etiqueta, pega este código:
<style>
  .videoResponsive {
    position: relative;
    padding-bottom: 56.25%; /* Proporción 16:9 */
    height: 0;
    overflow: hidden;
  }
  
  .videoResponsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

🔹 Paso 2: Insertar un video en tus entradas

Ahora, cada vez que quieras agregar un video de YouTube (o de otra fuente) dentro de tus publicaciones, debes envolverlo dentro de un contenedor con la clase videoResponsive. Aquí tienes un ejemplo: 

<div class="videoResponsive">
  <iframe src="URL_DEL_VIDEO"
    title="Título del Video"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    allowfullscreen>
  </iframe>
</div>

🔹 Paso 3: Guardar y comprobar

Guarda los cambios en tu entrada y revisa cómo se ve el video desde diferentes dispositivos. De esta manera, tu contenido se verá profesional y 100% adaptado a móviles, tablets y ordenadores.

✅ Con estos simples pasos, tus videos en Blogger siempre se verán perfectos, sin importar si tu audiencia los mira desde un móvil, tablet o PC.