desk-responsive

En esta ocasión quisiera compartirles uno de los trucos que particularmente me ha resultado más útiles a la hora de insertar iframes en páginas con diseño responsivo. Los iframes, por desgracia no son elementos fluidos, o mejor dicho, sí lo son, pero no de la forma deseada pues como todos – o casi todos – sabemos, para que un elemento sea responsivo el alto y ancho deben ajustarse de forma proporcional; pero, a diferencia de una imagen, no es tan sencillo como poner en nuestra hoja de estilos “max-width: 100%; height: auto;”, ¿Qué podemos hacer entonces? Lo que tenemos que hacer es incluir un elemento padre, os lo explico a continuación con un sencillo ejemplo:

Lo que hemos hecho es introducir nuestro iframe dentro de un divisor con la clase video-responsivo, y ahora vamos a dar formato a este elemento de la siguiente forma:

¿Por qué padding-bottom: 75%?

Buena pregunta. Esta técnica fue introducida por Thierry Koblentz en el blog “A list apart”; Thierry nos explica que este número es el resultado de dividir los valores width=”640” y height=”480” de nuestro Iframe y corresponden al formato 4:3. El formato más utilizado actualmente es el 16:9 (panorámico, por ejemplo 640×360) y en estos casos la proporción exacta sería 56.25%, pero quería que entendiesen el concepto.

FitVid.js

Hay una alternativa a este método y es agregar la librería JavaScript FitVid.js a nuestro sitio. Esta librería hace el mismo trabajo que os acabo de mostrar; detecta elementos multimedia en nuestro sitio y los adapta.

Autor: Javier Ocampos

Co-fundador de Nube Online, director operativo y desarrollador web por vocación. Mi premisa es la honradez e innovación en cada uno de mis trabajos.

Página web

Nube Online