AMP
  • stories

Supported media types in AMP Stories

Introduction

Stories support only a subset of the media types available in AMPHTML. This samples gives an overview on which are supported.

amp-img

Images are fully supported via the amp-img extension.

<amp-story-page id="amp-img">
  <amp-story-grid-layer template="fill">
    <amp-img  src="https://unsplash.it/720/320/?image=10"
              grid-area="middle-third"
              width="720"
              height="320"
              layout="responsive"
              alt="..."></amp-img>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="thirds">
    <h1 grid-area="upper-third">amp-img</h1>
  </amp-story-grid-layer>
</amp-story-page>

amp-video

The only way to embed videos is currently via the amp-video extension.

<amp-story-page id="amp-video">
  <amp-story-grid-layer template="fill">
    <amp-video autoplay loop
          grid-area="middle-third"
          width="720"
          height="960"
          poster="https://amp.dev/static/samples/img/story_video_dog_cover.jpg"
          layout="responsive"
          alt="...">
          <source src="https://amp.dev/static/samples/video/story_video_dog.mp4" type="video/mp4">
    </amp-video>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="thirds">
    <h1 grid-area="upper-third">amp-video</h1>
  </amp-story-grid-layer>
</amp-story-page>

Note that amp-video extension has different validation rules when used within an AMP Story—both the autoplay and poster attributes are required.

background-audio

You can playback audio for a single amp-story-page using the background-audio attribute on the amp-story-page element. This attribute can also be applied to the amp-story element to playback audio across an amp-story.

<amp-story-page id="background-audio"
  background-audio="https://ia801402.us.archive.org/16/items/EDIS-SRP-0197-06/EDIS-SRP-0197-06.mp3">
  <amp-story-grid-layer template="thirds">
    <h1 grid-area="upper-third">background-audio</h1>
  </amp-story-grid-layer>
</amp-story-page>

amp-gfycat

Embed animated GIFs from https://gfycat.com/.

<amp-story-page id="amp-gfycat">
  <amp-story-grid-layer template="fill">
      <amp-gfycat data-gfyid="TautWhoppingCougar"
                  width="640"
                  height="360"
                  layout="responsive">
      </amp-gfycat>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="vertical">
    <h1 grid-area="upper-third">amp-gfycat</h1>
  </amp-story-grid-layer>
</amp-story-page>
Wünschst du eine genauere Erklärung?

Sollten die Erklärungen auf dieser Seite nicht all deine Fragen beantworten, kannst du dich gerne an andere AMP Nutzer wenden, um deinen konkreten Use Case zu besprechen.

Zu Stack Overflow wechseln
Ein Feature wurde nicht erklärt?

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.

Beispiel auf GitHub bearbeiten