什么时候应该在 amp-story 的 amp-video 上使用 layout="fill" 与 layout="responsive"？两者有什么区别？答案

【问题标题】：When should you use layout="fill" versus layout="responsive" on amp-video in amp-story? What is the difference between the two?什么时候应该在 amp-story 的 amp-video 上使用 layout="fill" 与 layout="responsive"？两者有什么区别？
【发布时间】：2018-10-13 14:07:57
【问题描述】：

以下是 amp-video 标签的 amp 文档中建议的两个代码 sn-ps。在大多数情况下，哪种实现会产生更快、更可靠的结果？这两个 sn-ps 在性能和 UX 方面有什么区别？

使用 template="fill" 和 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>

第二个代码 sn-p 与 template="fill" 和 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>

【问题讨论】：

标签： video amp-html amp-story

【解决方案1】：

两者都不会直接影响性能；这只会改变页面上的布局。此外，template="fill" 属性实际上是特殊的，因为它覆盖了元素的大小。

所以，我实际上相信，无论layout 属性的值如何，只要在包含层上设置了template="fill" 属性，这里的最终结果都是一样的。

【讨论】：