ampproject / ampproject/amp-toolbox

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

Open
#1,187 8 comments 0 reactions 0 assignees View on GitHub
enhancement toolbox-optimizer
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



Introducing How to AMP

```

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

```html




Introducing How to AMP

```

(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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.