AMP-YouTube - Lazyloading the placeholder image

Question

When using the amp-youtube component, I have noticed that it uses the static cover image for the video as a placeholder until the user scrolls towards the video at which point the video itself gets loaded in!

This is great! However, when testing my page in PageSpeed insights, I'm getting penalized for "Defer offscreen images" because the placeholder image that is used is itself not Lazyloaded.

All other amp-img on the page get Lazyloaded so I'm hoping there is a way to enable it for the YouTube code too?

This is an example of a page with YouTube videos on it: https://nationalguitaracademy.com/acoustic-guitar-tabs/amp/

PageSpeed Results for the Page: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fnationalguitaracademy.com%2Facoustic-guitar-tabs%2Famp%2F

TLDR: The video itself gets lazyloaded, but the static image used until the video loads is not lazyloaded.

Answer 1

Trying adding a custom placeholder like this:

<amp-youtube
 // attributes here 
>
  <amp-img
    src="// placeholder image "
    placeholder
    layout="fill"
  />
</amp-youtube>

If that doesn't work, there really isn't a way to fix Lighthouse or Speed Insights erorrs when it comes to AMP cause you can't edit the source code. Your only hope is to file a bug report in the AMP GitHub project.