Add transformer for adding poster image placeholders to video embeds (e.g. YouTube)

[westonruter]

Something that we do in the WordPress plugin when converting a YouTube iframe into amp-youtube is automatically supply the poster image placeholder, which can greatly reduce LCP since YouTube videos are heavy and amp-youtube doesn't implement a facade.

So instead of:

<amp-youtube data-videoid="gYJ03GyrSrM" layout="responsive" width="16" height="9" title="Introducing How to AMP"></amp-youtube>

We generate:

<amp-youtube data-videoid="gYJ03GyrSrM" layout="responsive" width="16" height="9" title="Introducing How to AMP">
	<a placeholder href="https://www.youtube.com/watch?v=gYJ03GyrSrM">
		<amp-img src="https://i.ytimg.com/vi/gYJ03GyrSrM/hqdefault.jpg" layout="fill" object-fit="cover" alt="Introducing How to AMP" class="amp-wp-enforced-sizes">
			<noscript><img src="https://i.ytimg.com/vi/gYJ03GyrSrM/hqdefault.jpg" alt="Introducing How to AMP"></noscript>
		</amp-img>
	</a>
</amp-youtube>

With Optimized AMP and hero image prerendering, this is further optimized as the poster becomes a hero image:

<amp-youtube data-videoid="gYJ03GyrSrM" layout="responsive" width="16" height="9" title="Introducing How to AMP" class="i-amphtml-layout-responsive i-amphtml-layout-size-defined" i-amphtml-layout="responsive">
	<i-amphtml-sizer style="display:block;padding-top:56.25%"></i-amphtml-sizer>
	<a placeholder href="https://www.youtube.com/watch?v=gYJ03GyrSrM">
		<amp-img src="https://i.ytimg.com/vi/gYJ03GyrSrM/hqdefault.jpg" layout="fill" object-fit="cover" alt="Introducing How to AMP" class="amp-wp-enforced-sizes" i-amphtml-ssr data-hero>
			<img class="i-amphtml-fill-content i-amphtml-replaced-content" decoding="async" alt="Introducing How to AMP" src="https://i.ytimg.com/vi/gYJ03GyrSrM/hqdefault.jpg" style="object-fit:cover">
		</amp-img>
	</a>
</amp-youtube>

(Caveat: It seems currently only the PHP implementation of PreloadHeroImage is identifying such placeholders as hero image.)

It seems generally useful to have an optimizer transformer that does this for all amp-youtube components that lack a placeholder, and to do the same for other popular components which have an easily-determined poster image.

[sebastianbenz]

Thanks for filing. This looks very useful! Is the placeholder image URL scheme an official API?

[westonruter]

De facto official, I believe. See https://stackoverflow.com/a/2068371/93579.

[westonruter]

If the amp-youtube amp-img[data-hero] is identified as a hero image, then the PreloadHeroImage transformer should also add a link[rel=preconnect] for https://i.ytimg.com. This will also improve the performance of loading the YouTube iframe.

This further relates to ampproject/amp-toolbox-php#10: if we identify that amp-youtube is in hero position, shouldn't we also add a link[rel=preconnect] for https://www.youtube.com?

[westonruter]

The poster image URLs are also utilized in the lite-youtube-embed facade.

[sebastianbenz]

Did you test whether this causes a double download of the poster image because of origin keyed caching?

[westonruter]

That's a great point. No, I didn't test that.

[sebastianbenz]

I looked into this. It doesn't matter in this case as the AMP runtime also injects the poster image (which causes a double download anyway).

[westonruter]

Great! (?)