Uploaded June 2024 | Updated September 2026, 1 week ago

---

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: codepen.io/ZoranJambor/pen/yLWzqQY?layout=left
🔥 Button by Jhey Tompkins (@jh3y): codepen.io/jh3y/pen/eYPYKep
✈️ Jhey's website: https://jhey.dev/

🔗 Mastering Linting: 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:
💌 css-weekly.com

Help support my channel
👨‍🎓 Get a course: masteringlinting.com
🪧 Buy a CSS sticker pack: stickers.css-weekly.com
💖 Support me on Patreon: patreon.com/cssweekly

Keep up-to-date with CSS Weekly:
🐦 Twitter: twitter.com/@cssweekly
🎶 TikTok: tiktok.com/@cssweekly
🎇 Instagram: instagram.com/cssweekly
📘 Facebook: facebook.com/CSSWeekly

Keep up to date with what I'm up to:
👨‍💼 Blog: zoranjambor.com
💼 LinkedIn: linkedin.com/in/zoranjambor

- Zoran Jambor
#css #htmlvideo