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>
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.
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.
Vimeo
Si el video es de 600px por debajo de la parte superior, no se requiere ninguna imagen de marcador de posición.
Giphy
Aquí hay otra muestra de un iframe que incrusta un GIF animado de Giphy .
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.
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:
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.
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<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>
Comentarios
Disqus comments:
Facebook comments: