amp-story-player
Description
A player for embedding and playing your favorite stories in your own AMP site.
Required Scripts
<script async custom-element="amp-story-player" src="https://cdn.ampproject.org/v0/amp-story-player-0.1.js"></script>
Supported Layouts
Usage
Use amp-story-player to embed and play stories within an AMP webpage.
Embed in an AMP page
The code snippet below demonstrates an embed of <amp-story-player> in a AMP webpage.
<head> <script async src="https://cdn.ampproject.org/v0.js"></script> <script async custom-element="amp-story-player" src="https://cdn.ampproject.org/v0/amp-story-player-0.1.js" ></script> </head> <body> <amp-story-player layout="fixed" width="360" height="600"> <a href="https://preview.amp.dev/documentation/examples/introduction/stories_in_amp/"> <img src="https://amp.dev/static/samples/img/story_dog2_portrait.jpg" width="360" height="600" loading="lazy" data-amp-story-player-poster-img> Stories in AMP - Hello World </a> </amp-story-player> </body>
Specify embedded stories
The <amp-story-player> component contains one or more <a> tags. Point the href attribute of each to the story URL.
Place the story's title within the <a> tag. This provides a better user experience and allows search engines to crawl embedded stories.
Attributes
layout
Supports any of the size-defined layouts:
- fixed
- fixed-height
- responsive
- fill
Validation
See amp-story-player rules in the AMP validator specification.
You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.
Go to Stack Overflow Found a bug or missing a feature?The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.
Go to GitHub