Vídeos responsive en Blogger y Wordpress

Los teléfonos celulares son la principal fuente de visitas para un sitio web, es por ello que tener un diseño web responsive o adaptativo es de vital importancia de cara a mostrarle al usuario un diseño acorde al tamaño de la pantalla de su teléfono, y esto por supuesto también incluye material audiovisual como los vídeos, pues si bien hay algunas plantillas y temas para Blogger y Wordpress que son responsives, no incluyen entre sus funciones la de hacer responsive los vídeos, por ello hoy veremos como gracias a un pequeño fragmento de CSS los vídeos se adaptarán a cualquier tipo de pantalla en nuestros sitios de Blogger y Wordpress.

Vídeos responsive en Blogger y Wordpress


Lo primero que debes es añadir el siguiente CSS a tu blog:

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

En el caso de Blogger debes ir a Temas, Editar HTML y justo antes de ]]></b:skin> pegas el CSS), para Wordpress debes editar el archivo CSS de tu tema.

Ahora, cada vez que vayas a insertar un vídeo deberás encerrar el código del vídeo (desde la edición HTML de la entrada) con la siguiente etiqueta:

<div class="video-container">
      <!--  Código del vídeo -->
</div>

<!--  Código del vídeo --> corresponde al lugar donde deberás agregar el código del vídeo.

Con este código podrás hacer responsive no solamente vídeos, cualquier otro contenido incrustado como presentaciones en diapositivas, chats o foros se adaptarán a múltiples resoluciones de pantallas.

A continuación podrás ver como el siguiente vídeo de YouTube es responsive (se recomienda visualizar desde terminales móviles como celulares y tabletas).

Entradas que pueden interesarte

disqus