I have an amp-story where I need to create a page with full-screen video from a dynamic generated url. In page-2 below where I use an amp-video component directly it renders full-screen, in page-3 where I use an amp-list to provide the video url it does not "fill" the page. See https://codepen.io/svdoever/pen/gKPdjK. To check out the example on codepen.io first click the button and refresh to enable the amp-story experiment. Then make the preview window large enough to show the story.
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-0.1.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>
<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
<title>My Story</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href="amp-list-video-story.html">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
body {
font-family: 'Roboto', sans-serif;
}
amp-story-page {
background: white;
}
h1 {
font-size: 2.875em;
font-weight: normal;
line-height: 1.174;
text-transform: uppercase;
}
</style>
</head>
<body>
<amp-story standalone>
<amp-story-page id="cover">
<amp-story-grid-layer template="vertical">
<h1>Hello World</h1>
<p>This is the cover page of this story.</p>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="page-1">
<amp-story-grid-layer template="vertical">
<h1>Hello Earth</h1>
<p>This is the earth page of this story.</p>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="page-2">
<amp-story-grid-layer template="fill">
<amp-video width="480" height="270"
src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WhatCarCanYouGetForAGrand.mp4"
layout="responsive"
poster="https://dummyimage.com/720x1280/000/fff" controls autoPlay loop>
<div fallback><p>Your browser doesn't support HTML5 video.</p></div>
</amp-video>
</amp-story-grid-layer />
</amp-story-page>
<amp-story-page id="page-3">
<amp-story-grid-layer template="fill">
<amp-list layout="fill" width="480" height="270" single-item items="."
src="https://gist.githubusercontent.com/svdoever/9de8228fbea47100cdac3ee636f04d3f/raw/4d2b98691858c2e780a489cb201ac0fe491b24c0/amp-list-video-story.json">
<template type="amp-mustache" id="amp-template-id">
<amp-video width="480" height="270" src="{{url}}" layout="responsive" poster="https://dummyimage.com/720x1280/000/fff" autoPlay>
<div fallback><p>Your browser doesn't support HTML5 video.</p></div>
</amp-video>
</template>
</amp-list>
</amp-story-grid-layer />
</amp-story-page>
</amp-story>
</body>
</html>
Currently the "fill" styling (done with
object-fit: coveron an element that takes up the full viewport) is only applied to direct descendants of<amp-story-grid-layer>, but your video is not a direct descendant because it is embedded within an<amp-list>. You can see the styles causing this in amp-story.css.That said, it is likely going to be a performance hit to do multiple roundtrip requests to determine the video to play (first to fetch the JSON, then to fetch the
poster, then to fetch thesrc), and this will make the page appear blank until the network requests have completed.Another approach that can be used is to determine the proper video URL server-side, to minimize the number of requests in the critical path for the user.