Today, millions of domains have published billions of instant-loading pages using the Accelerated Mobile Pages framework. Started several years ago, this project has successfully helped improve not only web page load times, but user experience and, as a result, business ROI.
It’s been accomplished by lowering the “weight” of pages — their size data — with restrictions on JavaScript, lightweight replacements of popular coding languages, and caching on Google’s content delivery network.
The projects biggest critique, however, was that it traded engagement for speed. While that was once true — AMP was primarily used on news sites for static content — it is no longer. Now AMP can be used to build entire websites, complete with high-speed versions of heavy page elements like video. Today we outline exactly how these AMP video components work, down to definitions of particular coding terms, analytics capabilities, layouts and more.
Attributes
Each AMP video component comes with a set of attributes. Some overlap, some are unique to the component, and each controls an aspect of the way the video behaves or is displayed.
The following is a list of attributes you’ll find among the components, and what they mean. This list is not comprehensive. It’s best to double-check a component’s dedicated AMP developer page before you add it to your page.
- src: This element is required if there is no <source> specified. It has to be specified in HTTPS.
- poster: This specifies the image thumbnail that’s displayed before the viewer clicks “play.” The first frame is displayed by default. You can also choose to display an overlay, which is click-to-play.
- autoplay: If the browser supports autoplay, you can use this attribute to make a video autoplay as soon as it’s in view of the visitor.
- controls: With this attribute, the browser will offer controls that the user can control the video player with.
- controlsList: Only supported by some browsers, the controlsList allows users to display controls that can be used to adjust playback.
- dock: When combined with the amp-video-docking extension, this attribute minimizes and fixes the video player to a corner when a user scrolls out of its area.
- loop: If implemented, the video will automatically loop back to the beginning when it reaches the end.
- crossorigin: This element is required if the video is hosted somewhere other than the origin document.
- disableremoteplayback: With this element, disable remote playback through systems like Chromecast or AirPlay.
- noaudio: This attribute disables audio on a video.
- rotate-to-fullscreen: If this attribute is enabled, when the user turns their device, the video will adjust to fullscreen.
Common Attributes
Common attributes are ones that apply to many AMP components. In our list of AMP video components, when you see a reference to “common attributes,” it means that the following can be used with them.
Fallback
With a fallback, the browser will communicate to the viewer when it does not support an element, or when loading has failed. In the example below, the error message reads “Cannot play animated images on this device.” A fallback can be used on any AMP element that supports fallbacks, and will be shown in place of the unsupported element.
Heights
If an element supports the responsive layout, it supports the height attribute, too. The height attribute is specified based on media expressions and applies only to height. Percent values are allowed. If the height is 80%, as in the below example, the height of the element will be 80% of its width.
Layout
The layout attribute specifies how an element behaves. You can specify a layout for a component by adding the layout attribute with one of the supported layout values for the element (more on what those are later).
Media
Most AMP elements support the media attribute. The value of media is a media query. If the query does not match, the element is not rendered, and its resources and potentially its child resources will not be fetched. If the browser window changes size or orientation, the media queries are re-evaluated, and elements are hidden and shown based on the new results.
Noloading
As they load, many AMP elements display a basic loading animation, which indicates that the element is being processed for display. The noloading attribute controls whether that animation is showed.
Placeholder
The element marked with the placeholder attribute will display a placeholder for its parent element. In the example below, a preview image is shown as a placeholder for an animated gif. This attribute can be used on any HTML element which is a child of an AMP element that supports placeholders.
The placeholder will show immediately in its parent’s place, by default. When the resource is served, the placeholder is hidden and the resource is displayed in its place.
Sizes
If an AMP element supports the responsive layout, it also support the sizes attribute. This attribute defined by the media query based on the current user’s window size.
Width and height
In certain layouts, a width and height attribute that contains a pixel value must be specified for some AMP components.
Layout
According to AMP developer resources, AMP’s <amp-img> and <amp-video> elements can have one of six layouts, each of which makes the element behave differently:
Responsive
When an element is made responsive, it will resize automatically to fit the space of a given area. The available space depends on the parent element.
However, you can’t simply specify an element as responsive. To ensure it displays, you have to specify a width and height for the containing element.
Nodisplay
With this layout, your element won’t be displayed. It will take up no space on the screen at all. It can be applied to any AMP element and assumes that a user action can make the element visible, like hovering to enable a pop-up, for example.
Intrinsic
In this layout, an element consumes the space available, resizing its height based on the width and height attributes until it reaches natural size or a CSS constraint like max-width.
That available space is dependant on the parent element.
Flex-item
With this layout, elements in their parent will consume the remaining space of that parent when it is a flexible container, like “display: flex.”
Fixed-height
Elements specified as fixed-height will adjust to fit the available space, but their height will remain constant. In this case, a height attribute must be present, and the width attribute must not be (or if it is, equal to zero).
Fixed
A fixed element has a fixed height and width, and no responsiveness is supported. To enable this layout, both width and height must be specified.
Fill
With this layout, an element will fill all available height and width. It will match the height and width of its parent element as long as the parent container specifies “position:relative” or “position:absolute.”
Container
Like an HTML div, this layout lets an element’s children define its size. With a container, the component only acts as a container, and does not have a specific layout itself. Its children are rendered instantly.
Analytics support
While every AMP video component may not have the analytics capability that other video players have, that doesn’t mean you can’t track very specific video performance metrics. Here’s what you’ll be able to track:
- autoplay: Indicates whether the video began as an autoplay video.
- currentTime: Specifies the current playback time (in seconds) at the time of trigger.
- duration: Specifies the total duration of the video (in seconds).
- height: Specifies the height of video (in px).
- id: Specifies the ID of the video element.
- playedTotal: Specifies the total amount of time the user has watched the video.
- state: Indicates the state, which can be one “playing_auto”, “playing_manual”, or “paused”.
- width: Specifies the width of video (in px).
- playedRangesJson: Represents segments of time the user has watched the video (in JSON format).
For some AMP video components, you’ll be able to detect all these metrics. For others, you’ll only have partial analytics support. Partial support means that all except for currentTime, aduration, playedRangesJson, and playedTotal are supported. In the AMP video components section, you’ll find levels of analytics support. Find more on AMP video analytics here.
AMP video components
amp-video
The amp-video component is a replacement for the HTML5 video tag; only to be used for direct HTML5 video file embeds. The amp-video component loads the video resource specified by its src attribute lazily, at a time determined by the runtime. You can control an amp-video component much the same way as a standard HTML5 <video> tag.
Example
Analytics support: full
Script required: <script async custom-element=”amp-video” src=”https://cdn.ampproject.org/v0/amp-video-0.1.js”></script>
Available layouts: fill, fixed, fixed-height, flex-item, nodisplay, responsive
Attributes: src, poster, autoplay, controls, controlsList, dock, loop, crossorigin, disableremoteplayback, noaudio, rotate-to-fullscreen, common attributes
amp-3q-player
The amp-3q-player component allows developers to embed videos from 3Q SDN.
Example
Analytics support: partial
Script required: <script async custom-element=”amp-3q-player” src=”https://cdn.ampproject.org/v0/amp-3q-player-0.1.js”></script>
Available layouts: fill, fixed, flex-item, responsive
Attributes: autoplay (optional), common attributes
amp-brightcove
The amp-brightcove component embeds a video player as seen in Brightcove’s Video Cloud or the Brightcove Player.
Example
Analytics support: full
Script required: <script async custom-element=”amp-brightcove” src=”https://cdn.ampproject.org/v0/amp-brightcove-0.1.js”></script>
Available layouts: fill, fixed, fixed-height, flex-item, nodisplay, responsive
Attributes: data-account, data-player or data-player-id, data-embed, data-video-id, data-playlist-id, data-referrer, data-param-
amp-dailymotion
When amp-dailymotion component shows a video from the Dailymotion player.
Example
Analytics support: partial
Script required: <script async custom-element=”amp-dailymotion” src=”https://cdn.ampproject.org/v0/amp-dailymotion-0.1.js”></script>
Available layouts: fill, fixed, fixed-height, flex-item, responsive
Attributes: autoplay, data-videoid (required), data-mute (optional), data-endscreen-enable (optional), data-sharing-enable (optional), data-start (optional), data-ui-highlight (optional), data-ui-logo (optional), data-info (optional), data-param-* (optional), dock, common attributes
amp-facebook
The amp-facebook component has a little more versatility than many of the tags on this list. In addition to video, the amp-facebook tag can display a Facebook comment or post as well.
Example
Analytics support: partial
Script required: <script async custom-element=”amp-facebook” src=”https://cdn.ampproject.org/v0/amp-facebook-0.1.js”></script>
Available layouts: fill, fixed, fixed-height, flex-item, nodisplay, responsive
Attributes: data-href (required), data-embed-as, data-align-center, data-locale (optional), common attributes
amp-gfycat
The amp-gfycat component displays a GIF from gfycat.com.
Example
Analytics support: partial
Script required: <script async custom-element=”amp-gfycat” src=”https://cdn.ampproject.org/v0/amp-gfycat-0.1.js”></script>
Available layouts: fill, fixed, fixed-height, flex-item, responsive
Attributes: data-gfyid, width and height, noautoplay, common attributes
amp-hulu
The amp-hulu component embeds a video from Hulu.
Example
Analytics support: partial
Script required: <script async custom-element=”amp-hulu” src=”https://cdn.ampproject.org/v0/amp-hulu-0.1.js”></script>
Available layouts: fill, fixed, fixed-height, flex-item, responsive
Attributes: data-eid, common attributes
amp-ima-video
The amp-ima-video embeds a video player for instream video ads. The component requires an ad tag, provided in data-tag, which is a URL to a VAST-compliant ad response (for examples, see IMA Sample Tags).
Example
Analytics support: partial
Script required: <script async custom-element=”amp-ima-video” src=”https://cdn.ampproject.org/v0/amp-ima-video-0.1.js”></script>
Available layout: fixed, responsive
Attributes: data-tag (required), data-src, data-crossorigin, data-poster (optional), data-delay-ad-request (optional), data-ad-label (optional), dock, common attributes
amp-izlesene
The amp-izlesene component allows users to embed a Izlesene video.
Example
Analytics Support:: partial
Script Required: <script async custom-element=”amp-izlesene” src=”https://cdn.ampproject.org/v0/amp-izlesene-0.1.js”></script>
Available layouts: fill, fixed, fixed-height, flex-item, responsive
Attributes: data-videoid (required), data-param-showrel
amp-kaltura-player
The amp-kaltura-player component enables users to embed a video using the Kaltura Video Platform player.
Example
Analytics Support:: partial
Script Required: <script async custom-element=”amp-kaltura-player” src=”https://cdn.ampproject.org/v0/amp-kaltura-player-0.1.js”></script>
Available Layouts: fill, fixed, fixed-height, flex-item, nodisplay, responsive
Attributes: data-partner, data-uiconf, data-entryid, data-param-*, common attributes.
amp-ooyala-player
The amp-ooyala-player allows users to embed an Ooyala video.
Example
Analytics Support: partial
Script Required: <script async custom-element=”amp-ooyala-player” src=”https://cdn.ampproject.org/v0/amp-ooyala-player-0.1.js”></script>
Available Layouts: fill, fixed, flex-item, responsive
Attributes: data-embedcode (required), data-playerid (required), data-pcode (required), data-playerversion (optional), data-config (optional), common attributes
amp-reach-player
The amp-reach-player component allows users to embed the Reach Player found in the Beachfront Reach platform.
Example
Analytics Support: partial
Script Required: <script async custom-element=”amp-reach-player” src=”https://cdn.ampproject.org/v0/amp-reach-player-0.1.js”></script>
Available Layouts: fill, fixed, fixed-height, flex-item, responsive
Attributes: data-embed-id, common attributes
amp-springboard-player
The amp-springboard-player displays the player used in Springboard.
Example
Analytics Support: partial
Script Required: <script async custom-element=”amp-springboard-player” src=”https://cdn.ampproject.org/v0/amp-springboard-player-0.1.js”></script>
Available Layouts: fill, fixed, flex-item, responsive
Attributes: date-site-id (required), data-mode (required), data-content-id (required), data-player-id (required), data-domain (required), data-items (required), common attributes
amp-video-docking
With the amp-video-docking extension, videos can be minimized to a corner of a page or a custom positioned element, but only if the video is playing manually. When the user scrolls out of the video component’s area, the video will minimize and move to the designated location. If the user scrolls back, it will return to its original position. Additionally…
- The video can be docked to a default corner or to a custom fixed position.
- The video can be dragged and repositioned by the user on a different corner.
- The video can be flicked to be dismissed from its docked position.
- Multiple videos on the same page can be docked, but only one at a time will be docked and fixed.
By default, the video will be minimized to the top-right corner. At 30% of the viewport’s width, no less than 180 pixels wide. If the document is RTL, the video will dock to the top-left corner. When in this mode, users can drag the docked video to snap to either corner.
This extension can only be used with a supported video player. Currently, the supported players are:
- amp-brightcove
- amp-dailymotion
- amp-delight-player
- amp-ima-video
- amp-video
- amp-video-iframe
- amp-youtube
Again, the video will only be docked ONLY if it’s playing manually. This means:
- If the video has autoplay, the feature will not be triggered unless the user clicks on the video first.
- If the video does not have autoplay, the feature will not be triggered unless the user plays the video.
- If the video is paused while scrolling, it will not be docked.
Script Required: <script async custom-element=”amp-video-docking” src=”https://cdn.ampproject.org/v0/amp-video-docking-0.1.js”></script>
amp-video-iframe
The amp-video-iframe displays an iframe containing a video player. This component must not be used for the primary purpose of displaying advertising. It’s okay to use amp-video-iframe for the purpose of displaying videos, where part of the videos are advertising. But advertising use cases should use amp-ad instead.
Example
For the video integration to work, the document living inside your frame must include a small library:
Analytics Support: partial
Script Required: <script async custom-element=”amp-vimeo” src=”https://cdn.ampproject.org/v0/amp-vimeo-0.1.js”></script>
Available Layouts: fill, fixed, fixed-height, flex-item, intrinsic, nodisplay, responsive
Attributes: src (required), poster (required), autoplay, common attributes, dock, implements-media-session, implements-rotate-to-fullscreen
amp-vimeo
The amp-vimeo component enables users to embed a video from Vimeo.
Example
Analytics Support: partial
Script Required: <script async custom-element=”amp-vimeo” src=”https://cdn.ampproject.org/v0/amp-vimeo-0.1.js”></script>
Available Layouts: fill, fixed, fixed-height, flex-item, responsive
Attributes: autoplay, data-videoid (required)
amp-viqeo-player
The amp-viqeo-player displays a Viqeo video player.
Example
Analytics Support: partial
Script Required: <script async custom-element=”amp-viqeo-player” src=”https://cdn.ampproject.org/v0/amp-viqeo-player-0.1.js”></script>
Available Layouts: fill, fixed, fixed-height, flex-item, responsive
Attributes: autoplay, data-profileid, data-videoid, width and height
amp-wistia-player
The amp-wistia-player component allows users to embed.
Example
Analytics Support: partial
Script Required: <script async custom-element=”amp-wistia-player” src=”https://cdn.ampproject.org/v0/amp-wistia-player-0.1.js”></script>
Available Layouts: fill, fixed, fixed-height, flex-item, responsive
Attributes: data-media-hashed-id, common attributes
amp-youtube
The amp-youtube component allows creators to embed a YouTube video.
Example
Script Required: <script async custom-element=”amp-youtube” src=”https://cdn.ampproject.org/v0/amp-youtube-0.1.js”></script>
Attributes: autoplay, data-videoid, data-live-channelid, data-param-*, dock, credentials (optional), common attributes.
Conclusion
AMP web pages are no longer limited when it comes to displaying media. Combined with attributes, layouts, and analytics, AMP video components make it possible for creators to display rich visualizations without compromising on speed. Are you ready to create faster mobile post-click landing pages?
To learn more about what AMP can do for your landing pages, get an Instapage demo today.