Everything Digital Advertisers Must Know About AMP Video & Attributes

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.