Cómo Hacer que tus Videos en Blogger Sean Responsive con CSS

En el mundo digital actual, la adaptabilidad es clave para brindar una experiencia óptima a los usuarios, independientemente del dispositivo que utilicen. Si eres un creador de contenido y utilizas Blogger para compartir tus videos, es fundamental asegurarte de que estos se vean bien en cualquier pantalla, ya sea una computadora de escritorio, una tableta o un teléfono móvil. En este artículo, te mostraremos cómo hacer que tus videos en Blogger sean responsivos utilizando CSS, lo que garantizará que tus videos mantengan su calidad visual sin importar el tamaño de la pantalla.

Paso 1: Agregar el Código CSS a tu Plantilla de Blogger

]]></b:skin> Y arriba de esta, agregas estos estilos:

El primer paso es agregar el código CSS necesario a la plantilla de tu blog en Blogger. Este código se encargará de aplicar el estilo que permitirá que tus videos sean responsivos. Copia el siguiente fragmento de código y pégalo en la sección de estilos CSS de tu plantilla:

CSS<style>
  .videoResponsive {
    position: relative;
    padding-bottom: 56.25%; /* Proporción 16:9 (dividir altura entre ancho) */
    height: 0;
    overflow: hidden;
  }
  
  .videoResponsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

Paso 2: Agregar el Código al Contenido de tus Entradas

Una vez que hayas agregado el código CSS a tu plantilla, estás listo para hacer que tus videos sean responsivos. Antes de insertar cualquier video en una entrada de Blogger, asegúrate de envolver el código del video en un contenedor con la clase "videoResponsive". Aquí tienes un ejemplo de cómo debería verse el código:

HTML <div class="videoResponsive">
  <iframe allowfullscreen=""
    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>