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
966 stars 70 forks source link

Custom poster image #45

Open setsqr opened 2 years ago

setsqr commented 2 years ago

Hi,

Thanks for your work on this!

I wondered if you'd consider having a poster image attribute so people could choose to override the YouTube-generated poster images?

Many thanks.

justinribeiro commented 2 years ago

The reason I didn't add that feature as part of #28 is because I'd tepid about breaking the contract of expectation.

The existing YouTube Embed API doesn't allow for this functionality and I get why: you're overriding something the author explicitly set on the video itself and it could lead to bait-and-switch embeds—e.g. a thumbnail that doesn't match the content, ala a Rickroll but more nefarious.

On the other hand, authors may want this functionality because YouTube does weird things to the thumbnails as it is and people may just want a better thumbnail.

Which is to say, I already have a branch locally that does this via a slot but I have not finished wrestling with the good, bad, and sneaky. :-)

setsqr commented 2 years ago

Hi Justin, thanks so much for your reply. I'd not even considered nefarious usage, so that's an interesting thought. I guess you're absolutely right - it could be something that somebody might abuse. I do think though that if the aim of the implementer was to deceive there are plenty of ways they could do that.

For me it comes down to quality - both visual and technical. Our builds just couldn't get the design fidelity we need using YouTube's thumbnails, and similarly not being able to optimise the poster image we lose an element of control over the performance of the page. Our videos can be quite large on the page so both of these things are pretty important; fundamental, even.

I totally get where you're coming from in wanting to maintain purity with the YouTube core service, but I'd vote for ignoring the Rick-rollers and sneaks - those folks will always find a way - and trust that most people just want to make even more awesome websites with your awesome web component :)

Genuinely though, do what you gotta do, and thanks again for your time regardless - it's much appreciated.

CryptorClub commented 2 years ago

Hello @setsqr You could modify this lines, if it would be helpful for you, in your lite-youtube JS/TS file

        const posterUrlWebp = `https://i.ytimg.com/vi_webp/${this.videoId}/${this.posterQuality}.webp`;
        const posterUrlJpeg = `https://i.ytimg.com/vi/${this.videoId}/${this.posterQuality}.jpg`;
setsqr commented 2 years ago

Thanks @CryptorClub, that helps a little with the technical part of the problem, but doesn't overcome the fact that YouTube can (/usually does) generate really gnarly images that don't do the video any justice, visually.

christopherdarling commented 2 years ago

+1 for this

mrwweb commented 1 year ago

A +1 to this request. First time playing with lite-youtube has been this week and it's awesome.

I'll add that a custom poster image could additionally be a big performance win since authors could optimize the image size for the context of the player and also (presumably) the lite-youtube element could reduce the number of initial requests to YouTube's server by not requesting the poster image.

ishanAhuja commented 1 year ago

+1 for this