Here are two suggested code snippets from the amp documentation for the amp-video tag. Which implementation produces a faster, more reliable outcome under most circumstances? What is the difference between the two snippets in terms of performance and UX?
first code snipped with template="fill" and layout="fill" - https://github.com/ampproject/amphtml/blob/master/extensions/amp-story/amp-story.md#children
<amp-story-page id="cover">
<amp-story-grid-layer template="fill">
<amp-video layout="fill" src="background.mp4" poster="background.png" muted autoplay></amp-video>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<h1>These are the Top 5 World's Most...</h1>
<p>Jon Bersch</p>
<p>May 18</p>
</amp-story-grid-layer>
<amp-story-grid-layer template="thirds">
<amp-img grid-area="bottom-third" src="a-logo.svg" width="64" height="64"></amp-img>
</amp-story-grid-layer>
</amp-story-page>
second code snippet with template="fill" and layout="responsive" - https://www.ampproject.org/docs/reference/components/amp-video
<amp-video controls
width="640"
height="360"
layout="responsive"
poster="images/kitten-playing.png">
<source src="videos/kitten-playing.webm"
type="video/webm" />
<source src="videos/kitten-playing.mp4"
type="video/mp4" />
<div fallback>
<p>This browser does not support the video element.</p>
</div>
Neither one has direct implications on performance; this only changes the layout on the page. Additionally, the template="fill" attribute is actually special in that it overrides the sizing of the element.
So, I actually believe that the end result here will be the same regardless of the value of the layout attribute, as long as the template="fill" attribute is set on the containing layer.