How to create the YouTube like-button glow effect when you say “subscribe” in a video
Learn how to create an interaction with an HTML Video element where a call to action button glows when a keyword like "subscribe,” "sign up,” or “like” is mentioned.
The interaction is created using JavaScript based on the video content. This rainbow glow subscribe and like button effect can be seen on YouTube when words like "subscribe" or "like" are mentioned in a video.
🌟 Demo: https://codepen.io/ZoranJambor/pen/yL...
🔥 Button by Jhey Tompkins (@jh3y): https://codepen.io/jh3y/pen/eYPYKep
✈️ Jhey's website: https://jhey.dev/
🔗 Mastering Linting: https://masteringlinting.com/
🏷️ 20% discount coupon code: videocue
📖 Chapters
00:00 HTML setup for the interaction
01:23 How to generate subtitles for your videos
02:23 The principle behind the rainbow-glow YouTube effect
03:35 How to set up “cuechange” event listener in JavaScript
06:26 How to add/remove class on a button to trigger an animation effect
08:26 Recap - How to create glow effect based on video content
Subscribe to CSS Weekly Newsletter:
💌 https://css-weekly.com/
Help support my channel
👨🎓 Get a course: https://masteringlinting.com/
🪧 Buy a CSS sticker pack: https://stickers.css-weekly.com
💖 Support me on Patreon: / cssweekly
Keep up-to-date with CSS Weekly:
🐦 Twitter: / @cssweekly
🎶 TikTok: / cssweekly
🎇 Instagram: / cssweekly
📘 Facebook: / cssweekly
Keep up to date with what I'm up to:
👨💼 Blog: https://zoranjambor.com
💼 LinkedIn: / zoranjambor
Zoran Jambor
#css #htmlvideo