ampproject / ampproject/amp-toolbox
Add transformer for adding poster image placeholders to video embeds (e.g. YouTube)
- Dominant language
- HTML
- Stars
- 459
- Forks
- 242
- PR merge metrics
- No merged PRs in 30d
Description
Something that we do in the WordPress plugin when converting a YouTube iframe into `amp-youtube` is automatically [supply](https://github.com/ampproject/amp-wp/blob/b9bf0d20758de5def2452fe7eb07e7deb22f3221/includes/embeds/class-amp-youtube-embed-handler.php#L116-L133) the poster image placeholder, which can greatly reduce LCP since YouTube videos are heavy and `amp-youtube` doesn't implement a [facade](https://web.dev/third-party-facades/).
So instead of:
```html
```
We generate:
```html
```
With Optimized AMP and hero image prerendering, this is further optimized as the poster becomes a hero image:
```html
```
(Caveat: It seems currently only the PHP implementation of `PreloadHeroImage` is [identifying](https://github.com/ampproject/amp-toolbox-php/blob/894798248306a4bfa40ad0e0c2e1f438466b5eac/src/Optimizer/Transformer/PreloadHeroImage.php#L282-L287) 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.
Contributor guide
Research direction
Start by reviewing the linked WordPress class-amp-youtube-embed-handler.php implementation and the PHP PreloadHeroImage.php logic for identifying placeholders as hero images. Define the transformer scope for amp-youtube and other components with determinable poster URLs; done means missing placeholders are generated without changing components that already have one.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html
- Domain
- tooling, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100