Search code examples
videoamp-htmlamp-story

How do <div> tags interact with amp-story in the following scenarios?


How do <div> tags interact with amp-story in the following scenarios? Which scenario(s) work according to the way amp-story is supposed to work with fast loading, without AMP errors, etc and why?

scenario 1: div tags outside of amp-story

<div>
  <div class="amp-video-container">
    <amp-story-page id="page-1">
      <amp-story-grid-layer template="fill">
            <amp-video autoplay
                loop
                width="720"
                height="960"
                poster="https://ampbyexample.com/img/story_video_dog_cover.jpg"
                layout="responsive">
                <source src="https://ampbyexample.com/video/story_video_dog.mp4"
                type="video/mp4">
            </amp-video>
      </amp-story-grid-layer>
    </amp-story-page>  
  </div>
</div>

scenario 2: div tags inside amp-story-page

<amp-story-page id="page-1">
    <div>
        <div class="amp-video-container">
            <amp-story-grid-layer template="fill">
                <amp-video autoplay
                loop
                width="720"
                height="960"
                poster="https://ampbyexample.com/img/story_video_dog_cover.jpg"
                layout="responsive">
                <source src="https://ampbyexample.com/video/story_video_dog.mp4"
                type="video/mp4">
                </amp-video>
            </amp-story-grid-layer>
        </div>
    </div>
</amp-story-page> 

scenario 3: div tags inside amp-story-grid-layer

<amp-story-page id="page-1">
    <amp-story-grid-layer template="fill">
        <div>
            <div class="amp-video-container">
                <amp-video autoplay
                loop
                width="720"
                height="960"
                poster="https://ampbyexample.com/img/story_video_dog_cover.jpg"
                layout="responsive">
                <source src="https://ampbyexample.com/video/story_video_dog.mp4"
                type="video/mp4">
                </amp-video>
            </div>
        </div>
    </amp-story-grid-layer>
</amp-story-page>  

references https://xbyexample.appspot.com/advanced/video_carousels_with_amp-carousel/


Solution

  • Scenarios 1 and 2 are not valid. All content in stories must be within a layer, so scenario 3 is the only one that meets this criteria.

    To check whether your document is valid AMP, see http://validator.ampproject.org/. For more about the structure of an AMP story, see understanding the parts of an AMP story.