AMP Extensions are either extended components or extended templates.
Extended components must be explicitly included into the document as custom elements.
For example, to include a youtube video in your page
include the following script in the <head>
:
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
Current list of extended components:
Component | Description |
---|---|
amp-access |
Provides AMP paywall and subscription support. |
amp-accordion |
Provides a way for viewers to have a glance at the outline of the content and jump to a section of their choice at will. |
amp-analytics |
Captures analytics data from an AMP document. |
amp-anim |
Manages an animated image, typically a GIF. |
amp-audio |
Replaces the HTML5 audio tag. |
amp-brightcove |
Displays a Brightcove Video Cloud or Perform player. |
amp-carousel |
Displays multiple similar pieces of content along a horizontal axis. |
amp-dailymotion |
Displays a Dailymotion video. |
amp-dynamic-css-classes |
Adds several dynamic CSS class names onto the HTML element. |
amp-facebook |
Displays a Facebook post or video. |
amp-fit-text |
Expands or shrinks font size to fit the content within the space given. |
amp-font |
Triggers and monitors the loading of custom fonts. |
amp-iframe |
Displays an iframe. |
amp-image-lightbox |
Allows for an “image lightbox” or similar experience. |
amp-instagram |
Displays an Instagram embed. |
amp-install-serviceworker |
Installs a ServiceWorker. |
amp-lightbox |
Allows for a “lightbox” or similar experience. |
amp-list |
Dynamically downloads data and creates list items using a template. |
amp-mustache |
Allows rendering of Mustache.js templates. |
amp-pinterest |
Displays a Pinterest widget or Pin It button. |
amp-soundcloud |
Displays a Soundcloud clip. |
amp-twitter |
Displays a Twitter tweet. |
amp-user-notification |
Displays a dismissable notification to the user. |
amp-vimeo |
Displays a Vimeo video. |
amp-vine |
Displays a Vine simple embed. |
amp-youtube |
Displays a YouTube video. |
NOT LAUNCHED YET
Extended templates must be explicitly included into the document as custom templates.
For example, to include an amp-mustache template in your page
include the following script in the <head>
:
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
Current list of extended templates:
Component | Description |
---|---|
amp-mustache |
Mustache template. |