ampproject / ampproject/amphtml
AMP-Youtube Placeholder Image Doesn't Work?
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
### Description
Hi!
Is there a way to lazy load a youtube video? The problem with youtube video is it drops pagespeed mobile score more than 30points. I was thinking using a placeholder image would act as a lazy loading of some sort. Unfortunately it does not.
Can you make it so that the video will only appear after clicking the play button and will only display the placeholder image initially? So pagespeed won't be able to detect youtube video js files which falls under "Reduce unused JavaScript" error.
I hope I'm making sense.
Thank you!
### Reproduction Steps
No youtube video but longer page
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fssptesting.com%2Fampfullwidth%2F
With youtube video but shorter page
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fssptesting.com%2Fampfullwidth%2Fabout%2F
### Relevant Logs
_No response_
### Browser(s) Affected
_No response_
### OS(s) Affected
_No response_
### Device(s) Affected
_No response_
### AMP Version Affected
_No response_
Contributor guide
Research direction
Start with the two PageSpeed reproduction URLs and inspect the AMP YouTube component entry point to understand when the video and its JavaScript load. Done means the initial view shows only the placeholder, clicking the play button reveals the video, and the change is verified against the reported PageSpeed behavior; no source file or test is named in the issue.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, performance
- Issue type
- Feature
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 28/100