Solucionar tamaño de los vídeos

La propagación de contenidos en vídeo es cada día más frecuente. Es muy habitual el uso de recursos como YouTube o Vimeo, que ofrecen la inserción de los vídeos a través de un pequeño código (iframe).

Las estructuras no adaptables de nuestro tema pueden crear un conflicto entre el tamaño del vídeo indicado en el iframe y las dimensiones del dispositivo del usuario. Como resultado el vídeo con su tamaño fijo se corta en pantallas más reducidas que las dimensiones del vídeo.

Para solucionar este problema y hacer que nuestro vídeo sea responsive, sólo tenemos que añadir un css que indique un tamaño 100% creando un nuevo archivo o añadiéndolo donde corresponda.

[css].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%;
}[/css]

Una vez creado el estilo podemos incluir iframe del vídeo dentro de la etiqueta div class=”video-container” que quedará de la siguiente forma:

[html]

[/html]

Con este sencillo truco podemos evitar la visualización deficiente de los vídeos en estructuras responsive. Es una solución puntual. Si el uso de vídeos en un proyecto es importante es más recomendable solucionarlo modificando el tema y los css para crear una estructura estable.