Amp-iframe


Amp-iframe


Utilice amp-iframe para incrustar contenido en archivos AMP a través de iframe.

Importe el componente amp-iframe en el encabezado.

Ingrese el siguiente script justo despues de la apertura <head>


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


Los iframes deben estar a 600px de distancia de la parte superior o no dentro del primer 75% de la ventana de visualización cuando se desplaza hacia arriba, lo que sea menor. Este ejemplo podría no funcionar dependiendo del ancho de la pantalla. En ese caso sólo mostrará un indicador de carga.


Ejemplo

<amp-iframe width="500"   height="281"   layout="responsive"   sandbox="allow-scripts allow-same-origin allow-popups"   allowfullscreen   frameborder="0"   src="https://player.vimeo.com/video/140261016"> </amp-iframe>

Uso de marcadores de posición

El 600px lejos de la restricción superior se puede evitar mediante la adición de una imagen de marcador de posición.


Ejemplo

<amp-iframe width="500"   height="281"   layout="responsive"   sandbox="allow-scripts allow-same-origin allow-popups"   allowfullscreen   frameborder="0"   src="https://player.vimeo.com/video/140261016">   <amp-img layout="fill"     src="https://i.vimeocdn.com/video/536538454_640.webp"     placeholder></amp-img> </amp-iframe>

Vimeo

Si el video es de 600px por debajo de la parte superior, no se requiere ninguna imagen de marcador de posición.


Ejemplo

<amp-iframe width="500"   height="281"   layout="responsive"   sandbox="allow-scripts allow-same-origin allow-popups"   allowfullscreen   frameborder="0"   src="https://player.vimeo.com/video/140261016"> </amp-iframe>

Giphy

Aquí hay otra muestra de un iframe que incrusta un GIF animado de Giphy .


Ejemplo

<amp-iframe width="600"   height="400"   layout="responsive"   sandbox="allow-scripts allow-same-origin allow-popups"   frameborder="0"   src="https://giphy.com/embed/DKG1OhBUmxL4Q"> </amp-iframe>

Mapas de Google

La incorporación de Google Maps es posible a través de la API de Google Maps. Eequiere una clave de API. Asegúrese de que su clave de API permita las solicitudes del dominio ampproject.org.


Ejemplo

<amp-iframe width="600"   height="400"   layout="responsive"   sandbox="allow-scripts allow-same-origin allow-popups"   frameborder="0"   src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ2eUgeAK6j4ARbn5u_wAGqWA&key=AIzaSyCNCZ0Twm_HFRaZ5i-FuPDYs3rLwm4_848"> </amp-iframe>

Iframes redimensionables

Una característica importante de amp-iframe es la capacidad de redimensionar el iframe en tiempo de ejecución. Para que esto funcione:

El amp-iframe debe establecer el atributo de sandbox de allow-same-origin.
El amp-frame debe ser definido con el atributo resizable.
El amp-iframe debe tener un elemento hijo de desbordamiento.
El documento iframe debe enviar una embed-size requerido:

window.parent.postMessage({
  sentinel: 'amp',
  type: 'embed-size',
  height: document.body.scrollHeight
}, '*');


En el ejemplo siguiente se muestran dos casos de uso de cambio de tamaño:

Cambiar el tamaño de la carga: el tamaño del iframe se establece inicialmente en 150x150 px a través del diseño de amp-iframe amplificador. En carga de página, el iframe incrustado se 200x200 a 200x200 px.
Cambiar el tamaño de la interacción del usuario: al presionar el botón se redimensionará el iframe a 300x300 px.


Ejemplo

Click to show more
<amp-iframe width="150"   height="150"   sandbox="allow-scripts allow-same-origin"   resizable   frameborder="0"   src="https://amp-by-example-api.appspot.com/iframe/resizable-iframe.html"   class="m1">   <div overflow     tabindex="0"     role="button"     class="ampstart-card py1"     aria-label="Show more">Click to show more</div> </amp-iframe>





Share:

Related post

Disqus

Disqus comments:


Facebook

Facebook comments: