Fix double tap issue on Mobile #90

dantovbein · 2021-07-14T11:24:35Z

What is done

Fix double tap issue on Mobile
Currently, you must to double tab a video and is very annoying for the users.

Fetch YouTube API script on demand
The client fetch the YouTube API Library only when the user click a placeholder video by the first time.

It doesn't use iframes directly
iframes are using internally through the YouTube API Library

Keep the performance stunning
It doesn't impact to the performance because the library is not being fetched at the same time that the page is being loaded. You can validate against the two attached reports below.

Lighthouse

The reports are almost the same, in fact, you can see on the first screenshot that the video placeholder is being shown more faster than the previous implementation.

This is the audit related to the new implementation /variants/solo:

This is the audit related to the previous implementation /variants/solo:

westonruter · 2021-07-14T13:41:44Z

src/lite-yt-embed.js

+            playerVars: { 'autoplay': 1, 'playsinline': 1 },
+            events: {
+                'onReady': (event) => {
+                    event.target.mute();


Removed. It was used for testing.
Thanks!

Currently, you must to double tab a video and is very annoying for the users. Fetch YouTube API script on demand The client fetch the YouTube API Library only when the user click a placeholder video by the first time. It doesn't use iframes directly iframes are using internally through the YouTube API Library Keep the performance stunning It doesn't impact to the perfomance because the library is not being fetched at the same time that the page is being loaded

oxyc · 2021-07-21T23:05:30Z

Tested it out and it's not working with safari on iOS

Edit: seems it worked while you had it muted

dantovbein · 2021-07-22T16:16:16Z

HI Oskar, Which version of iOS have you tested it out on?

…

On Wed, 21 Jul 2021 at 20:05, Oskar Schöldström ***@***.***> wrote: Tested it out and it's not working with safari on iOS — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#90 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAVPE5GA62P7WGJ4CRL47RLTY5HEJANCNFSM5ALIGC2Q> .

-- Dan Tovbein

oxyc · 2021-07-22T19:25:07Z

iOS 14.6

GP-Dan-Tovbein · 2021-07-29T17:27:28Z

iOS 14.6

@oxyc I tested on IOs 14.6 Safari and works fine 🤔

Garbee · 2021-07-30T09:41:02Z

src/lite-yt-embed.js

@@ -40,6 +39,19 @@ class LiteYTEmbed extends HTMLElement {
        // TODO: support dynamically setting the attribute via attributeChangedCallback
    }

+    fetchYoutubeAPI(cb) {


Why not make this a promise?

Yes, it could be.
But honestly, I don't see any blocker in this case.

Garbee · 2021-07-30T09:43:35Z

src/lite-yt-embed.js

+    onYouTubeIframeAPIReady() {
+        const videoWrapper = document.createElement('div')
+        videoWrapper.id = this.videoId;
+        document.body.appendChild(videoWrapper);


Ditto on only be manipulating the custom element structure. Not the main body. Please use 'this.appendChild' or reference a node within the element to bind to.

Good point 👍

Garbee · 2021-07-30T09:44:57Z

src/lite-yt-embed.js

+        var tag = document.createElement('script');
+        tag.src = 'https://www.youtube.com/iframe_api';
+        tag.async = true;
+        var firstScriptTag = document.getElementsByTagName('script')[0];


We shouldn't be manipulating things outside of the element itself. Please just add the script within the element's scope.

I don't agree in this case, because you're fetching the library on demand

kevinfarrugia

Looking forward to this PR. 👏

I tested on Chrome on Android and it works well, however on iOS Simulator (iPhone 5s 10.3.1 and iPhone X 14.4) and it doesn't work - video still plays but requires double tap.

Also there is an issue that it doesn't work if there are multiple embeds on the same page. I am not sure if it will be solved after addressing @Garbee 's comments. Perhaps a page should be added to the repo with two videos to cover it during testing.

You may want to fetch the latest changes from upstream. Left you some minor comments. Please let me know if you would like a hand tackling the requested changes, happy to assist.

kevinfarrugia · 2021-07-30T09:56:49Z

src/lite-yt-embed.js

-        this.insertAdjacentHTML('beforeend', iframeHTML);
+    onYouTubeIframeAPIReady() {
+        const videoWrapper = document.createElement('div')
+        videoWrapper.id = this.videoId;


From what I understand this line is not needed.

kevinfarrugia · 2021-07-30T09:59:33Z

src/lite-yt-embed.js

@@ -40,6 +39,19 @@ class LiteYTEmbed extends HTMLElement {
        // TODO: support dynamically setting the attribute via attributeChangedCallback
    }

+    fetchYoutubeAPI(cb) {
+        var tag = document.createElement('script');
+        tag.src = 'https://www.youtube.com/iframe_api';


There is a preconnect to https://www.youtube-nocookie.com that is no longer relevant and should possible be replaced by:

LiteYTEmbed.addPrefetch('preconnect', 'https://www.youtube.com');

Heads up that following this change, it will connect to youtube.com not the privacy-enhanced youtube-nocookie.com.

vucurovicmarko · 2021-09-09T11:47:55Z

Fixed dobule tap issue on mobile with this PR, but now multiple videos won't play on the same page.

philwolstenholme · 2021-09-21T21:08:20Z

Does this definitely work in iOS and for non-muted videos? I've tried a similar approach to this in the past and didn't get anywhere close to it working. I've not tried this PR but it doesn't look different from the code I tried that didn't work on mobile devices.

If we look at https://developers.google.com/youtube/iframe_api_reference#Autoplay_and_scripted_playback we can see this quote:

The HTML5 <video> element, in certain mobile browsers (such as Chrome and Safari), only allows playback to take place if it's initiated by a user interaction (such as tapping on the player). Here's an excerpt from Apple's documentation:

"Warning: To prevent unsolicited downloads over cellular networks at the user’s expense, embedded media cannot be played automatically in Safari on iOS — the user always initiates playback."

Due to this restriction, functions and parameters such as autoplay, playVideo(), loadVideoById() won't work in all mobile environments.

This PR uses playVideo(); and in my experience, that isn't enough to reliably avoid the double-tap issue for unmuted videos on iOS.

The only hack I found to get around this issue on mobile was to have the iframe element always on the page but set to be pretty much invisible (opacity: 0.01 with CSS) with a custom cover image behind it. We also had to load the iframe API JS, then have an onStateChange event listener that made the iframe fully visible (opacity: 1) once the iframe has been clicked on and the video was playing. This allowed us to use a custom cover image and avoid double taps on mobile, but it didn't have any of the performance benefits as the iframe element had to exist on the page and the YouTube iframe API JS also had to be loaded before the video could be interacted with. It was also very buggy, resulted in a video playing with audio but no picture if the JS failed, and if the user clicked part of the 'invisible' iframe that didn't result in playback (e.g. the bottom part of the video where the volume, fullscreen, link to YouTube, Chromecast etc buttons are) then weird things happened that the users weren't expecting 👎

legendofmi · 2021-11-21T12:56:08Z

Does this definitely work in iOS and for non-muted videos? I've tried a similar approach to this in the past and didn't get anywhere close to it working. I've not tried this PR but it doesn't look different from the code I tried that didn't work on mobile devices.

If we look at https://developers.google.com/youtube/iframe_api_reference#Autoplay_and_scripted_playback we can see this quote:

The HTML5 <video> element, in certain mobile browsers (such as Chrome and Safari), only allows playback to take place if it's initiated by a user interaction (such as tapping on the player). Here's an excerpt from Apple's documentation:

"Warning: To prevent unsolicited downloads over cellular networks at the user’s expense, embedded media cannot be played automatically in Safari on iOS — the user always initiates playback."

Due to this restriction, functions and parameters such as autoplay, playVideo(), loadVideoById() won't work in all mobile environments.

This PR uses playVideo(); and in my experience, that isn't enough to reliably avoid the double-tap issue for unmuted videos on iOS.

The only hack I found to get around this issue on mobile was to have the iframe element always on the page but set to be pretty much invisible (opacity: 0.01 with CSS) with a custom cover image behind it. We also had to load the iframe API JS, then have an onStateChange event listener that made the iframe fully visible (opacity: 1) once the iframe has been clicked on and the video was playing. This allowed us to use a custom cover image and avoid double taps on mobile, but it didn't have any of the performance benefits as the iframe element had to exist on the page and the YouTube iframe API JS also had to be loaded before the video could be interacted with. It was also very buggy, resulted in a video playing with audio but no picture if the JS failed, and if the user clicked part of the 'invisible' iframe that didn't result in playback (e.g. the bottom part of the video where the volume, fullscreen, link to YouTube, Chromecast etc buttons are) then weird things happened that the users weren't expecting 👎

You are right. I tested this solution on iPadOS Safari and it still requires double tapping. However, it does work on MacOS Safari which wasn't working before, so I would say it's still an improvement.

vercel bot deployed to Preview July 14, 2021 11:24 View deployment

dantovbein mentioned this pull request Jul 14, 2021

The double-tap / mobile issue. Autoplay doesn't consistently work #6

Open

westonruter reviewed Jul 14, 2021

View reviewed changes

dantovbein force-pushed the master branch from 72926cd to a652608 Compare July 14, 2021 14:29

vercel bot deployed to Preview July 14, 2021 14:29 View deployment

kevinfarrugia mentioned this pull request Jul 15, 2021

Video does not start on first click on button in mobile Chrome on Android #53

Open

Garbee suggested changes Jul 30, 2021

View reviewed changes

kevinfarrugia reviewed Jul 30, 2021

View reviewed changes

vucurovicmarko mentioned this pull request Sep 9, 2021

Multiple videos won't play at the same time, using open PR #90 for double click on mobile fix #94

Closed

paulirish mentioned this pull request Nov 29, 2021

use YT player API to force autoplay, resolving double-tap bug #109

Merged

paulirish merged commit b5575bc into paulirish:master Sep 11, 2022

renovate bot mentioned this pull request Oct 4, 2023

chore(deps): update all non-major dependencies jellydn/blog#536

Merged

1 task

elncetoo mentioned this pull request Jul 17, 2024

[Snyk] Upgrade lite-youtube-embed from 0.2.0 to 0.3.2 greenpeace/planet4-child-theme-nordic#71

Closed

TheAutisticTechie mentioned this pull request Aug 31, 2024

[Snyk] Upgrade lite-youtube-embed from 0.2.0 to 0.3.3 TheAutisticTechie/11ty-website#8

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix double tap issue on Mobile #90

Fix double tap issue on Mobile #90

dantovbein commented Jul 14, 2021

westonruter Jul 14, 2021

GP-Dan-Tovbein Jul 14, 2021

oxyc commented Jul 21, 2021 •

edited

Loading

dantovbein commented Jul 22, 2021 via email

oxyc commented Jul 22, 2021

GP-Dan-Tovbein commented Jul 29, 2021 •

edited

Loading

Garbee Jul 30, 2021

dantovbein Jul 30, 2021

Garbee Jul 30, 2021

dantovbein Jul 30, 2021

Garbee Jul 30, 2021

dantovbein Jul 30, 2021

kevinfarrugia left a comment •

edited

Loading

kevinfarrugia Jul 30, 2021

kevinfarrugia Jul 30, 2021

vucurovicmarko commented Sep 9, 2021

philwolstenholme commented Sep 21, 2021 •

edited

Loading

legendofmi commented Nov 21, 2021

Fix double tap issue on Mobile #90

Fix double tap issue on Mobile #90

Conversation

dantovbein commented Jul 14, 2021

What is done

Lighthouse

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oxyc commented Jul 21, 2021 • edited Loading

dantovbein commented Jul 22, 2021 via email

oxyc commented Jul 22, 2021

GP-Dan-Tovbein commented Jul 29, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kevinfarrugia left a comment • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

vucurovicmarko commented Sep 9, 2021

philwolstenholme commented Sep 21, 2021 • edited Loading

legendofmi commented Nov 21, 2021

oxyc commented Jul 21, 2021 •

edited

Loading

GP-Dan-Tovbein commented Jul 29, 2021 •

edited

Loading

kevinfarrugia left a comment •

edited

Loading

philwolstenholme commented Sep 21, 2021 •

edited

Loading