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.

Home Page:https://www.npmjs.com/package/@justinribeiro/lite-youtube

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Custom poster image

setsqr opened this issue · comments

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.

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. :-)

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.

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`;

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.

+1 for this

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.

+1 for this