¿Cómo hacer un Iframe responsivo?

Te mostramos como hacer un iframe responsivo

En la actualidad cada vez más personas utilizan sus teléfonos para navegar por la Web. Por lo tanto, es importante que los sitios web sean responsivos (que se adapten a las pantallas móviles).

La mayoría de los sitios web utilizan videos de YouTube, mapas de Google u otros elementos de sitios web externos incrustados en ellos. Estas funciones se incorporan más comúnmente en una página web utilizando el elemento IFRAME HTML y es una de las cosas difíciles para hacer responsivo.

Iframes responsivo

Con el propósito de demostrar cómo funciona el iframe responsive, usaremos un embed de YouTube para nuestro iframe. En primer lugar, ir a YouTube, hacer clic en ‘ compartir ‘ en el vídeo y luego ‘ incrustar ‘.

Ahora debe tener el siguiente código para copiar en el HTML.

A continuación, tenemos que quitar width = “560” height =”315″ porque estos están aquí para establecer el tamaño del iframe. Ya que vamos a establecer el tamaño nosotros mismos, esto es innecesario.

Uso de CSS

Después, necesitamos envolver el iframe en otro elemento HTML como un <div>, esto es muy importante ya que este elemento va a dimensionar tu iframe. A continuación, añadir una clase CSS a su nuevo elemento div y una clase a su iframe como se ve a continuación.</div>

Definir la clase contenedora con el siguiente estilo:

• position: relative
  La posición de la envoltura y el iframe es muy importante aquí. Lo estamos estableciendo en una posición relativa para que después podamos posicionar nuestro iframe en relación con el div.
• overflow:hidden
  Está allí para ocultar cualquier elemento que pueda ser colocado fuera del contenedor.
• padding-top: 56.25% –
  En CSS, la propiedad apadding-top puede recibir un porcentaje, esto es lo que mantiene nuestro iframe a la proporción correcta. Al utilizar el porcentaje, calculará el padding que se usará basándose en el ancho del elemento. En nuestro ejemplo, queremos mantener la relación de 56,26% (altura 9 ÷ anchura 16) porque esta es la relación por defecto para los vídeos de YouTube. Sin embargo, también se pueden utilizar otras proporciones.

Definir la clase del iframe de la siguiente manera:

• position: absolute
  Esto le dará al iframe una posición relativa a la envoltura y la dejará posicionarse sobre el relleno del envoltorio.
• top:0 y left:0
  Se utilizan para colocar el iframe en el centro del contenedor.
• width: 100% y height: 100%
  Se utiliza para que el iframe tome todo el espacio del div.

Desde jsfiddle pueden remover el código css y ver cómo el iframe no se ajusta a la pantalla en la pestaña de resultados.
Pueden ver el código en http://jsfiddle.net/sessionstudio/ds0qhn3g/5/

Resultado: