Default placeholder image about lite-youtube-embed HOT 7 CLOSED

Thanks for filing the issue. This is a super nice kick-off to discuss this functionality.

I think of these the placeholder attribute would be far more friendly. Plus if for whatever reason the URL structure changes (no idea why it would, but worst case scenario) then all we'd need to do is update the library and once users update it'll "just work" without them needing to go recode all the hardcoded URLs.

Alternate solution, perhaps we could use media queries to determine the best default one to pick though? If a user loads up the page on a big retina screen then we'd grab the highest resolution. If they resize down, it should scale down fine. If the initial load is on a phone, we grab the best one for that size of screen. This way, the initial load (for most player loads) it would be representative for that type of device. Then the placeholder attribute could be dynamically changed by scripting if a developer wishes to observe and modify it as the window/screen changes.

from lite-youtube-embed.

Hey @Garbee thanks for replying so fast.

I'm not sure media queries alone would be a great approach, because as far as I'm aware, media queries only take the full width of the browser window into consideration — Not the actual size of the player.

Even though you might have a large screen, say 2500px wide, we have no idea how large or small the actual players are. The page layout might have multiple columns. Let's say we have a 12 column grid, that would make each individual player only around (2500/12) 208px wide.

Maybe the <picture> element would be clever enough to handle this, but we'd have to add a bunch of additional JS and CSS to set up the scaling properly.

However, I agree that it would be fantastic to have some kind of dynamic placeholder sizing where developers could tailor the placeholder size depending on things like screen size, column count or connection speed.

from lite-youtube-embed.

Yea media query was just a quick thought. I knew it wasn't the full solution. #48 mentioned using the connection type alone to determine the image to use, but I also feel that is kinda lacking. Just because you may have 4g capability doesn't mean you want high quality.

Which leads me into another complexity here, user bandwidth. If a site wishes to simply use the lowest res possible so their visitors don't have any bloated data bills, that should be feasible. So any automated solution we come up with needs a developer controlled manual override. Which is where I think the placeholder attribute alone is the best initial start. Allow modification but leave the exact optimization details up to developers using the component. We can get into quite the matrix of details and weights when deciding on how to chose. Instead we could give control and document a couple of examples on how to decide what to use and the weights they favor for users. This way it's out of the library itself if developers get that deep but we guide them in how to achieve it.

from lite-youtube-embed.

Totally agree with all of those points, and it would definitely solve my problem here.

Do you think it would be possible to have the placeholder attr be reactive so that changing it would load a new placeholder image? This is useful in cases where the layout changes after the initial render. Otherwise you'd have to completely remove the element from the dom and insert a new one with a different placeholder attribute.

from lite-youtube-embed.

Reaction is totally possible and getting stuff setup for that is on my todo list. #28 had it setup with some other bits. But we're breaking it down into more manageable chunks to get included. #51 is the start of that. Once that lands, I'll start breaking down the other changes and get smaller PRs made. Then adding in this feature (should Irish approve) would be very straightforward.

from lite-youtube-embed.

You need to use the tag <img> with the src & srcset attributes for placeholder.

from lite-youtube-embed.

fixed in #75.

shipped in 0.2.0.

i added docs and a demo, too: https://github.com/paulirish/lite-youtube-embed#custom-poster-image

from lite-youtube-embed.