Giter Site home page Giter Site logo

Custom poster image about lite-youtube HOT 7 OPEN

justinribeiro avatar justinribeiro commented on July 26, 2024 3
Custom poster image

from lite-youtube.

Comments (7)

mrwweb avatar mrwweb commented on July 26, 2024 3

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.

from lite-youtube.

justinribeiro avatar justinribeiro commented on July 26, 2024

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

from lite-youtube.

setsqr avatar setsqr commented on July 26, 2024

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.

from lite-youtube.

CryptorClub avatar CryptorClub commented on July 26, 2024

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

from lite-youtube.

setsqr avatar setsqr commented on July 26, 2024

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.

from lite-youtube.

christopherdarling avatar christopherdarling commented on July 26, 2024

+1 for this

from lite-youtube.

ishanAhuja avatar ishanAhuja commented on July 26, 2024

+1 for this

from lite-youtube.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.