Como hacer un iFrame responsive

Hacer un marco iframe responsive o adaptativo no es algo trivial y, sin embargo, puede ser muy necesario en determinadas situaciones de desarrollo web.

En HTML, la etiqueta <iframe>, junto con la etiqueta <object> (que es en muchos aspectos equivalente y que nosotros utilizamos preferentemente) así como  la etiqueta <embed>, nos permiten embeber en las páginas y aplicaciones web contenidos externos de diverso tipo: desde vídeos a contenidos interactivos, gráficos SVG e incluso otras páginas web. Es decir, hacen las veces de contenedor o caja donde mostrar información de diverso tipo y procedencia.

Todas estas etiquetas nos ofrecen la posibilidad de definir una altura y una anchura para la caja contenedora, como por ejemplo:

Pero claro, así expresado, tendremos un tamaño fijo que no se adaptará convenientemente a las diferentes resoluciones de pantalla.

Si en lugar de utilizar un tamaño definido, utilizamos porcentajes, utilizando por ejemplo width=”100%” en lugar de width=”400″, conseguiremos que la anchura se adapte convenientemente pero no así la altura, que no cambiará de tamaño de manera proporcional, pongamos el valor que pongamos en height.

Pasos para hacer un iFrame responsive

1. Asegúrate de que el propio contenido del iFrame está diseñado para ajustarse en tamaño a su caja contenedora.

Esto no supone ninguna dicultad en el caso de los vídeos, pero puede suponer realizar cambios si se trata por ejemplo de imágenes SVG, dependiendo de como esté definido su tamaño.

2. Añade el siguiente CSS

Este CSS está pensado para una caja contenedora con proporción de 16:9, es decir apaisado en la misma proporción que la mayoría de vídeos ofrecidos por videocámaras modernas.

Si necesitas una proporción diferente cambia la siguiente linea de código

Recalculando el porcentaje de la siguiente manera: (altura/anchura)*100. Así conseguirás que la caja se adapte a las diferentes proporciones sin dificultad.

3. Inserta el código adecuado para el iFrame

Etiqueta <object> responsive

Si, al igual que nosotros prefieres utilizar la etiqueta <object>, tendrás que adaptar el código CSS ligeramente:

Y por supuesto, también el HTML:

Ejemplos

Recientemente hemos desarrollado para la empresa de seguridad Security Point Madrid, su sitio web, en el que hemos incluido algunos contenidos interactivos mediante esta técnica. Puedes ver el resultado en su página principal, en la sección 5 niveles de seguridad, pero también en la parte superior de esta página o esta otra.

¿Te ha sido de ayuda este pequeño truco? ¿Tienes dificultades para utilizarlo?. Cualquier duda o comentario no tienes más que dejárnoslo escrito aquí abajo, en el hilo de comentarios.

Y si lo que necesitas son nuestros servicios profesionales, no tiene más que ponerte en contacto con el equipo SinLios. Estaremos encantados de ayudarte.

 

 

1 Comentario

  • sda

    no funciona copiar el codigo

Escribir Comentario