Skip to content

Latest commit

 

History

History
138 lines (103 loc) · 6.57 KB

README.md

File metadata and controls

138 lines (103 loc) · 6.57 KB
Raw

AMP HTML Extensions

AMP Extensions are either extended components or extended templates.

AMP HTML Extended Components

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 by category:

Access

Component Description
amp-access Provides AMP paywall and subscription support.

Ads

Component Description
amp-ad Container to display an ad.
amp-embed An alias to the amp-ad tag.

Analytics

Component Description
amp-analytics Captures analytics data from an AMP document.

Audio/Video

Component Description
amp-audio Replaces the HTML5 audio tag.
amp-o2-player Displays a AOL O2Player.
amp-brid-player Displays a Brid.tv player.
amp-brightcove Displays a Brightcove Video Cloud or Perform player.
amp-dailymotion Displays a Dailymotion video.
amp-jwplayer Displays a cloud-hosted JW Player.
amp-kaltura-player Displays the Kaltura Player as used in Kaltura's Video Platform.
amp-reach-player Displays a Beachfront Reach video player.
amp-soundcloud Displays a Soundcloud clip.
amp-springboard-player Displays a Springboard Platform video player
amp-vimeo Displays a Vimeo video.
amp-vine Displays a Vine simple embed.
amp-youtube Displays a YouTube video.

Dynamic lists

Component Description
amp-list Dynamically downloads data and creates list items using a template.
amp-live-list Provides a way to display and update content live.

Forms

Component Description
amp-form Provides form support.

Frames

Component Description
amp-iframe Displays an iframe.

Presentation

Component Description
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-anim Manages an animated image, typically a GIF.
amp-carousel Displays multiple similar pieces of content along a horizontal axis.
amp-dynamic-css-classes Adds several dynamic CSS class names onto the HTML element.
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-fx-flying-carpet Wraps its children in a unique full-screen scrolling container allowing you to display a full-screen ad without taking up the entire viewport.
amp-image-lightbox Allows for an “image lightbox” or similar experience.
amp-lightbox Allows for a “lightbox” or similar experience.
amp-mustache Allows rendering of Mustache.js templates.
amp-sidebar Provides a way to display meta content intended for temporary access such as navigation, links, buttons, menus.
amp-sticky-ad Provides a way to display and stick ad content at the bottom of the page.
amp-user-notification Displays a dismissable notification to the user.

Scripts

Component Description
amp-install-serviceworker Installs a ServiceWorker.

Social

Component Description
amp-facebook Displays a Facebook post or video.
amp-instagram Displays an Instagram embed.
amp-pinterest Displays a Pinterest widget or Pin It button.
amp-social-share Displays a social share button.
amp-twitter Displays a Twitter tweet.
amp-vine Displays a Vine simple embed.

AMP HTML Extended Templates

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 templates.