How to create the YouTube like-button glow effect when you say “subscribe” in a video

No video

How to create the YouTube like-button glow effect when you say “subscribe” in a video

Рет қаралды 711

CSS Weekly

Күн бұрын

Пікірлер: 10

@thomasburette9129 2 ай бұрын

Nice effect. The drawback of this approach is that it only works if the subtitles are enabled. It won't work if you do not want the subtitles enabled by default or if the user disables them. An alternative would be to analyse the track during initial load and extract the timestamps where the keyword is used and then to use the 'timeupdate' event of to trigger the animation.

@CSSWeekly Ай бұрын

Thanks so much for your insight, Thomas! 🙏 I wanted to showcase the easiest solution here to inspire others, but it does have the drawback you mentioned. The alternative would probably be something one should implement in production-it's cool that you mentioned the 'timeupdate' event here. 👏

@ahmad-murery 2 ай бұрын

Nice Zoran! I didn't think it was that easy to create something like this, I actually wasn't aware of the cuechange event Thanks

@CSSWeekly 2 ай бұрын

Thank you, Ahmad! I’m glad you found it interesting. 🙂

@ScriptRaccoon 2 ай бұрын

That's a great video. I had no idea how KZfaq does it and believed it must be some rocket science. But it's not. We just take advantage of the cue change event of the track element. Nice! Is this also possible when the subtitles are not visible (but still present)? This would even be more magical to the user.

@Killyspudful 2 ай бұрын

Yes! :)

@CSSWeekly 2 ай бұрын

Thanks, my friend! 🙏 Yes, I think you can achieve this if you don't use native subtitles functionality but implement your own-you could hide them from the user but have them available behind the scenes. That's something you probably need to do if you want to style them specifically, as CSS :cue pseudo-element is quite limited.

@gangasai_kumar_G 2 ай бұрын

great work sir, can you also create when i clicked subscribe button on a youtube its create one animation like confetti effect, if it is posible to recreate that in css. can you make a video on it.💌🤟

@CSSWeekly 2 ай бұрын

Thank you, I appreciate it! 🙏 That’s an excellent idea! I’ll look into it, as it definitely seems to be something people might like. 🙂

@ScriptRaccoon 2 ай бұрын

I am also very much interested in this effect!