Supporting desktop and landscape mode

Edit on Github
Open in Playground View Story

Introduction

amp-story supports a desktop and landscape experience.

Setup

AMP Stories are written using AMPHTML and they use their own AMP extension: amp-story. The first step is to import the amp-story in the header.

<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>

Stories can be styled using CSS:

<style amp-custom>
  amp-story {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI ", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji ", "Segoe UI Emoji ", "Segoe UI Symbol ";
  }
  amp-story-page * {
    color: white;
    text-align: center;
  }
</style>

Desktop and landscape support

If supports-landscape attribute is specified on the amp-story element, it will:

  • allow the story to be seen when a mobile device is held in a landscape orientation
  • change the desktop experience to an immersive full bleed mode, replacing the default three portrait panels experience

Example

<amp-story standalone
  supports-landscape
  title="Stories in AMP - Hello World"
  publisher="AMP Project"
  publisher-logo-src="https://ampbyexample.com/favicons/coast-228x228.png"
  poster-portrait-src="https://ampbyexample.com/img/story_dog2_portrait.jpg"
  poster-square-src="https://ampbyexample.com/img/story_dog2_square.jpg"
  poster-landscape-src="https://ampbyexample.com/img/story_dog2_landscape.jpg">

  <amp-story-page id="page-1">
    <amp-story-grid-layer template="fill">
      <amp-img src="http://localhost:8080/img/tree-1920x1277.jpg"
        width="1920"
        height="1277"
        layout="responsive"></amp-img>
    </amp-story-grid-layer>
  </amp-story-page>
  <amp-story-page id="page-2">
    <amp-story-grid-layer template="fill">
      <amp-img src="http://localhost:8080/img/forest-1920x1280.jpg"
        width="1920"
        height="1280"
        layout="responsive"></amp-img>
    </amp-story-grid-layer>
  </amp-story-page>
  <amp-story-bookend src="https://ampbyexample.com/json/bookend.json"
    layout="nodisplay">
  </amp-story-bookend>
</amp-story>