Responsive amp-video-iframe based on sizes with media query.

Sample responsive amp-video-iframe

<!-- Page 6 (Rabbit): 3 layers (fill (video) + vertical + vertical) -->
      <amp-story-page id="page6">
        <amp-story-grid-layer template="fill">

            <!-- DESKTOP -->
            <amp-video-iframe media="(min-width: 900px)"

              id="myVideo"
              src="https://sudhir.dev/videojs-example/amp-videojs-embed1.html"
              poster="/videoplayback/images/videoplayback_poster.jpg"
              width="720"
              height="405"
              layout="responsive"
              autoplay>
            <div placeholder style="background: black; color: white">
              This is a placeholder
            </div>
            <div fallback>
              This is a fallback
            </div>
          </amp-video-iframe>

          <!-- TABLET  -->
          <amp-video-iframe media="(min-width: 500px) and (max-width: 899px)"
              id="myVideo"
              src="https://sudhir.dev/videojs-example/amp-videojs-embed1.html"
              poster="/videoplayback/images/videoplayback_poster.jpg"
              width="720"
              height="405"
              layout="responsive"
              autoplay>
            <div placeholder style="background: black; color: white">
              This is a placeholder
            </div>
            <div fallback>
              This is a fallback
            </div>
          </amp-video-iframe>

          <!-- MOBILE -->
          <amp-video-iframe media="(max-width: 500px)"
              id="myVideo"
              src="https://sudhir.dev/videojs-example/amp-videojs-embed1.html"
              poster="/videoplayback/images/videoplayback_poster.jpg"
              width="720"
              height="405"
              layout="responsive"
              autoplay>
            <div placeholder style="background: black; color: white">
              This is a placeholder
            </div>
            <div fallback>
              This is a fallback
            </div>
          </amp-video-iframe>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="vertical">
          <h1>Rabbits</h1>
        </amp-story-grid-layer>
        <amp-story-grid-layer template="vertical" class="bottom">
          <p>Rabbits can learn to follow simple voice commands and come when called by name, and are curious and playful.</p>
        </amp-story-grid-layer>
      </amp-story-page>