Update of the play button styles to better resemble the official one

paulirish / lite-youtube-embed

A faster youtube embed.

https://paulirish.github.io/lite-youtube-embed/

Other

5.68k stars 260 forks source link

Update of the play button styles to better resemble the official one #104

Closed mmnlfrrr closed 2 years ago

mmnlfrrr commented 2 years ago

Design Comparaisons:

lite-youtube-embed : current lite-youtube-embed-(current)

lite-youtube-embed : after these changes lite-youtube-embed-(after)

Youtube official embed normal-youtube-embed

New Play Button styles :

Not Hover : #212121 & opacity:0.8 Hover : #f00 & opacity:1

legendofmi commented 2 years ago

Seems to be broken (gray too dark or black) on iOS Safari, but works fine on Safari MacOS. My best guess is that iOS Safari doesn’t apply the contrast filter correctly.

paulirish commented 2 years ago

Thanks very much for playing around with this. I tried out your changes, and I now recall why I didnt set opacity on the whole element. While it's fine on the demo 2018sundar image, other poster images will bleed through the now 0.8 opacity play triangle:

appreciate you playing with this tho.

clearly this would be easier if we just committed to inline SVG, but I didn't want to for reasons of simplicity and maintainability.