Contenido

Inclusión de iframes

Learn how to display include media content in your pages, and how to use iframes to display advanced content outside of AMP's limitations.

Aspectos básicos

Puede incluir un iframe en su página usando el elemento amp-iframe.

Los iframes son especialmente útiles en AMP para mostrar contenido que no sea admitido en la página principal, como el contenido que requiere JavaScript creado por usuarios.

Requisitos de `amp-iframe`

Debe tener por lo menos 600 píxeles o un 75% de la primera ventana gráfica si empezamos por el principio de la página (excepto para los iframes que utilizan un placeholder).
Solo puede solicitar recursos mediante HTTPS, y estos no deben tener el mismo origen que el contenedor, a menos que no se especifique.

MÁS INFORMACIÓN: Obtenga más información en la especificación completa de amp-iframe.

Inclusión de la secuencia de comandos

Para incluir un amp-iframe en su página, primero debe incluir la siguiente secuencia de comandos en el <head>, el cual carga el código adicional del componente ampliado:

<script async custom-element="amp-iframe"
  src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

Escritura de las etiquetas

En el siguiente ejemplo, creamos un amp-iframe responsivo para incrustar un Google Map mediante la API de Google Maps Embed:

<amp-iframe
  width="200"
  height="100"
  sandbox="allow-scripts allow-same-origin"
  layout="responsive"
  src="https://www.google.com/maps/embed/v1/place?key={YOUR API KEY}&q=europe"
>
</amp-iframe>

Uso de marcadores de posición

Puede mostrar un amp-iframe en la parte superior de un documento siempre y cuando el atributo placeholder se incluya en algún elemento de amp-iframe, (por ejemplo, amp-img). Este elemento se renderizará como un marcador de posición hasta que el iframe esté listo para mostrarse.

MÁS INFORMACIÓN: Obtenga más información sobre los elementos placeholder en la sección Iframes con elementos placeholder.

Este ejemplo de un elemento placeholder:

<amp-iframe
  width="400"
  height="225"
  sandbox="allow-scripts allow-same-origin"
  layout="responsive"
  src="https://giphy.com/embed/OWabwoEn7ezug"
>
  <amp-img
    placeholder
    layout="fill"
    src="https://ampproject-b5f4c.firebaseapp.com/examples/images/kittens-biting.jpg"
  ></amp-img>
</amp-iframe>

Aparecerá así:

Ejemplos

Puede encontrar más ejemplos avanzados de amp-iframe nuestra página de Ejemplos de AMP.

Written by @pbakaus
with contributions from @Meggin and @bpaduch