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>

Открыть этот фрагмент в песочнице

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.

Требуется дополнительная помощь?

Вы читали этот документ десятки раз, но так и не нашли ответов на все свои вопросы? Возможно, другие люди столкнулись с такой же проблемой — обратитесь к ним на Stack Overflow.

Перейти на Stack Overflow

Нашли ошибку или недостающую функцию?

Проект AMP активно поощряет ваше участие и сотрудничество! Мы надеемся, что вы станете постоянным участником нашего открытого сообщества, но разовые вклады в работу над задачами, которые вам особенно интересны, также приветствуются.

Перейти на GitHub