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.
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).
