This guide provides recommended practices that you should implement when creating an AMP story.
You should specify a background color for your AMP story pages. By having a background color, you provide a good fallback user experience even if poor network conditions prevent them from downloading any image or video assets.
- The background color should be representative of the dominant color on the page's background asset.
- Choose a color that allows for a smooth transition with the image or page itself. You can choose to:
- Pick a dominant color representative of the image/video.
- Pick a consistent theme color for all pages in the story.
- The background color should be different from the font color so that the text is readable even before the image loads.
Ensure that text overlays on a page are readable:
- Choose a font color that contrasts with the background image and background color.
- Add a gradient overlay between the image and text to contrast the text and image.
Keep in mind that AMP stories are designed to offer a more visual experience, so keep text on a page limited to bite-size chunks (i.e., no more than 1-2 sentences). Carefully consider your aims and the reading flow if you believe more text on a page would be appropriate.
Specify a poster attribute
poster is an image that displays in the UI until your video is downloaded. The poster can generally be the first frame of the video, although any image can work. However, you should choose an image that is representative of the video and allows for a smooth transition. If you are choosing the first frame, make sure it's not just a blank temporary frame.
The recommended dimensions for a poster image are: 720p (720w x 1280h) .
Example: Specifying a poster
<amp-video autoplay loop width="720" height="1280" layout="responsive" poster="images/kitten-playing.png"> <source src="videos/kitten-playing.mp4" type="video/mp4" /> </amp-video>
When specifying the source for an amp-video, use
<source> child elements instead of the
src attribute. By using the
<source> element, you can specify the video type, as well as add more video sources. In the
<source> element, specify the MIME type via the
"type" attribute. For HLS videos, you must specify one of the following MIME types:
application/vnd.apple.mpegurl. For all other videos, specify the
video/ MIME prefix and the video format (e.g., "
Example: Specifying multiple source files
<amp-video id="video-page1" autoplay loop layout="fill" poster="https://example.com/media/poster.jpg"> <source src="https://amp-example.com/media/movie.m3u8" type="application/vnd.apple.mpegurl" /> <source src="https://amp-example.com/media/movie.mp4" type="video/mp4" /> </amp-video>
Size/Length of video
- For optimal performance, you should aim to provide videos that are no larger than 4 MB.
- For long videos, consider splitting the video over multiple pages.
- For the cover page, avoid particularly large videos.
If you can only provide a single video format, provide MP4. However, where possible, use HLS video and specify MP4 as a fallback for browsers that do not yet support HLS video. HLS performs adaptive bitrate streaming, where the quality of the video can be altered to best suit the user's network connection.
AMP story videos are always vertical (i.e., portrait view), with an expected aspect ratio of 16:9. Use the recommended resolution for the video streaming type:
|Video streaming type||Resolution|
|Non-adaptive||720 x 1280 px|
|Adaptive||720 x 1280 px
540 x 960 px
360 x 480 px
- For MP4, use
- For WEBM, use
- For HLS or DASH, use
There are various tools you can use to encode videos and adjust the quality of the video during encoding. Here are just a few:
|Shaka Packager||An encoder that can also output the HLS format including the playlist.|
HLS segment size
Ensure the size of your HLS segments are typically no more than 10 seconds in duration.
Advance to next page after video ends
If attempting to automatically advance from one page to another after a video finishes playing, you should set the value of the
auto-advance-after attribute of
<amp-story-page> to the id of the video, rather than the expected length of the video. That is, use
This is because the video may not start playing at exactly the same time as the page is displayed, or the given length may not be correct, leading to a different between the expected and actual durations. This can cause the video to loop, which can be distracting to the user.