[Story Player] AMP validator failures for <amp-story-player> for responsive layout

Given this amp-story-player example, which is taken from the docs but replacing fixed with responsive:

  <amp-story-player layout="responsive" width="360" height="600">
    <a
       href="https://preview.amp.dev/documentation/examples/introduction/stories_in_amp/"
       style="--story-player-poster: url('https://amp.dev/static/samples/img/story_dog2_portrait.jpg')"
    >
      Stories in AMP - Hello World
    </a>
  </amp-story-player>

If an amp-story-player is transformed via the Node.js AMP Optimizer, the result is this:

<amp-story-player layout="responsive" width="360" height="600" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
  <i-amphtml-sizer style="display:block;padding-top:166.6667%;"></i-amphtml-sizer>
  <a href="https://preview.amp.dev/documentation/examples/introduction/stories_in_amp/" style="--story-player-poster: url('https://amp.dev/static/samples/img/story_dog2_portrait.jpg')"> Stories in AMP - Hello World </a>
</amp-story-player>

This results in another validation error:

Tag 'i-amphtml-sizer' is disallowed as child of tag 'amp-story-player'. Child tag must be one of ['a'].

See example in AMP Playground.

[westonruter]

Specifically, it accounts for the responsive layout but not the intrinsic one. In the responsive layout, the sizer looks like:

<i-amphtml-sizer style="display:block;padding-top:166.6667%;"></i-amphtml-sizer>

Whereas in the intrinsic layout, the sizer looks like:

<i-amphtml-sizer class="i-amphtml-sizer">
    <img alt aria-hidden="true" class="i-amphtml-intrinsic-sizer" role="presentation" src="data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjYwMCIgd2lkdGg9IjM2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiLz4=">
</i-amphtml-sizer>

I’ll open a new issue specifically for the intrinsic layout.

[westonruter]

cc @ampproject/wg-caching @pbakaus @swissspidy