search

justinribeiro / lite-youtube

The fastest little YouTube web component on this side of the internet. The shadow dom web component version of Paul's lite-youtube-embed.
https://www.npmjs.com/package/@justinribeiro/lite-youtube
MIT License
948 stars 70 forks source link

Remove hardcoded autoplay #34

Closed AleksBeliun closed 2 years ago

AleksBeliun commented 2 years ago

Was wondering why were videos playing automatically even if autoplay is set to 0 in params https://github.com/justinribeiro/lite-youtube/blob/7578b8768c3a81472f77092f659b3ff4f9c08086/lite-youtube.ts#L257

Is there a reason why is autoplay is hardcoded to 1?

justinribeiro commented 2 years ago

Is there a reason why is autoplay is hardcoded to 1?

This setting honors what the user is looking to do in two cases:

  1. When the user interacts (clicks) the play button, the iframe is the loaded in that method (addIframe()) and plays based on that user interaction. If you didn't have autoplay=1, they would have to click twice to start the video.
  2. When the intersection observer hits the mark it too calls addIframe() which then invokes the injection which is helpful on mobile to cut down interactions due to constraints (ala, you can't autoplay on mobile devices).

The component has worked like this for quite a while. Can you explain why the double-interaction is a use case for you?

AleksBeliun commented 2 years ago

Double interaction is not the case that I am hoping for and I am not experiencing any double click to play in the first place.

My case is a blog article where there are multiple block components that build the final page The flow is something like this:

  1. Dynamically include lite-youtube script if the page contains any blocks with type video
  2. Populate block templates with article data
  3. All images or any other external content should be loaded lazily so the autoload with IntersectionObserver option comes into play

image

  1. Page is built, served, everyone is happy

All is fine but the video starts playing once the video block comes into view.

Changed the behavior for this case by removing hardcoded autoplay=1, adding autoplay=0 through params attribute, and serving modified lite-youtube script from own server. Mobile and Desktop play videos with just one click/tap without issues. image

Feels like autoplay option should have been left for the developer to control and/or maybe to have a default value of 1 that should be overridable with params or a separate tag attribute.

justinribeiro commented 2 years ago

autoload with IntersectionObserver option comes into play

Humm, yeah, on desktop that's an issue. The IntersectionObserver kicks automatically and on desktop, it will autoplay (though on mobile it won't).

Feels like autoplay option should have been left for the developer to control and/or maybe to have a default value of 1 that should be overridable with params or a separate tag attribute.

Can't directly give control on it, otherwise things will get weird for the common cases. I can however update it such that for the intersection observer the autoplay doesn't kick. Let me work up a patch and I'll get a version stamped. That way the behavior is 1:1 with the click interaction and the intersection observer.

AleksBeliun commented 2 years ago

Thank you