use YT player API to force autoplay, resolving double-tap bug #109
+77
−13
flip on yt api path for firefox and safari only
commit 0461e7483d9fc599361553cdb454cdcb10494b23
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -53,9 +53,14 @@ class LiteYTEmbed extends HTMLElement { | ||
| // We'd want to only do this for in-viewport or near-viewport ones: https://github.com/ampproject/amphtml/pull/5003 | ||
| this.addEventListener('click', this.addIframe); | ||
|
|
||
|
|
||
| // Chrome & Edge have no problem with the basic YouTube Embed with ?autoplay=1 | ||
| // However Safari and Firefox do not successfully track the user gesture of clicking through the creation/loading of the iframe, | ||
| // so they don't autoplay automatically. Instead we must load an additional 300KB (ungz) of JS for the YT Player API | ||
| this.needsYTApiForAutoplay = navigator.vendor.includes('Apple') || navigator.userAgent.includes('Firefox'); | ||
|
|
||
| if (this.needsYTApiForAutoplay) { | ||
| this.fetchYTPlayerApi(); | ||
| } | ||
| } | ||
|
|
||
| @@ -100,8 +105,9 @@ class LiteYTEmbed extends HTMLElement { | ||
| LiteYTEmbed.preconnected = true; | ||
| } | ||
|
|
||
| fetchYTPlayerApi() { | ||
|
There was a problem hiding this comment. alsoo wondering if there's a lazy way to attach... #82 hmmm! EDIT: see also #146 (comment) |
||
| if (window.YT || (window.YT && window.YT.Player)) return; | ||
|
|
||
| this.ytApiPromise = new Promise((res, rej) => { | ||
| var el = document.createElement('script'); | ||
| el.src = 'https://www.youtube.com/iframe_api'; | ||
| @@ -142,7 +148,7 @@ class LiteYTEmbed extends HTMLElement { | ||
| params.append('autoplay', '1'); | ||
| params.append('playsinline', '1'); | ||
|
There was a problem hiding this comment. |
||
|
|
||
| if (this.needsYTApiForAutoplay) { | ||
| return this.addYTPlayerIframe(params); | ||
| } | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i figure ill have to change this to be some other sniff. don't think there's a good "feature detect" that's equivalent to failing to successfully autoplay. so yeah.. we'll do a UA sniff of some sort.
but this'll need to also include chrome android as well. and perhaps more.
some testing required:
has problems with autoplay on https://lite-youtube-embed-git-master-paulirish.vercel.app/
ios safari
desktop safari
firefox android
chrome android
edge mobile (probably.. untested)
no problems
desktop chrome
desktop firefox
desktop edge (on mac)