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
836 stars 63 forks source link

Poster Fallback JPG doesn't work in 1.5.0 with FF #97

Open arcivanov opened 11 months ago

arcivanov commented 11 months ago

At the bottom of the https://pybuilder.io/ there is a "Watch the Presentation" section with an embedded YT.

We switched to lite-youtube (thank you!) but encountered that the JPG fallback fails.

The switch: https://github.com/pybuilder/pybuilder.github.io/commit/9f01bc98139e0f26d19513d6d92ef1359b6dd82e The fallback JPG exists but WEBP does not:

JPEG

WEBP

Yet the poster JPG is never loaded and only "missing WEBP" image can be seen:

image

I suspect that this is because the 404 returns the actual image along the 404:

image

Is there a way to make fallback reject the image in the 404 and actually fall back?

justinribeiro commented 11 months ago

The picture element doesn't support flipping the source in the case of a 404 or other error per the spec. To accomplish this, I'd have to add a little sugar to it to listen for the 404 and strip the source elem from picture. Let me see if I can sort that. :+1:

arcivanov commented 11 months ago

Thank you!

arcivanov commented 11 months ago

There is another option - make JPEG primary and WEBP a fallback. Would that work as an easier fix?

arcivanov commented 10 months ago

Any updates on this?

sgrund14 commented 10 months ago

running into this as well!

mrwweb commented 7 months ago

Hoping there can be a solution for this! Just a note that this issue appears in Chrome as well and I don't think it's browser specific.

And if it's useful, here's a StackExchange thread about this exact issue (the picture element with YouTube thumbs) with one potential approach to resolving this (probably not the right one?).