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

fill fixed fixed-height flex-item responsive intrinsic

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>

Dieses Snippet im Playground öffnen

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.

Benötigst du noch Hilfe?

Du hast dieses Dokument mehrmals gelesen, hast aber immer noch Fragen? Vielleicht hatten andere Nutzer das gleiche Problem: Schau doch bei Stack Overflow vorbei und lass dir von ihnen helfen.

Zu Stack Overflow wechseln

Möchtest du einen Bug oder ein fehlendes Feature melden?

Das AMP Projekt ist auf deine Teilnahme und deine Beiträge angewiesen! Wir hoffen natürlich, dass du dich aktiv an unserer Open Source Community beteiligen wirst. Aber wir freuen uns auch über einmalige Beiträge zu den Themen, die dich besonders interessieren.

Zu GitHub wechseln