Trigger videos when hovering over a thumbnail using automatically generated preview images with Cloudinary. We'll learn how to generate a thumbnail from a video on the fly with Cloudinary, lazy load videos for better performance, show a video when hovering over an image, and generate a short preview of the video. 🧐 What's Inside 00:00 - Intro 00:13 - Tools we'll use including Cloudinary and Next.js 01:18 - Creating a new Next.js app from a demo starter 02:40 - Uploading and delivering videos from Cloudinary 03:35 - Installing and configuring the Cloudinary JS URL Gen SDK 04:55 - Using the URL Gen SDK to add sources to video elements 07:22 - Generating video thumbnail image on-the-fly for the video poster attribute 09:05 - Using the Cloudinary React SDK and the AdvancedVideo component to lazy load videos 11:40 - Displaying and autoplaying videos when hovering over thumbnail with CSS and Sass 15:28 - Using React Refs and browser APIs to play and pause video only when hovering over a thumbnail 19:43 - Generating short preview videos on-the-fly with Cloudinary transformation effects 21:36 - Outro 💾 Code https://github.com/colbyfayock/my-videos 🗒️ Read More https://spacejelly.dev/posts/how-to-generate-video-thumbnails-on-the-fly-add-hover-preview-effects-with-cloudinary/ 🔔 Subscribe for more tech and developer videos null 🐦 Get updates straight to your Twitter @colbyfayock https://twitter.com/colbyfayock 📸 Catch the next stream live on Twitch @colbyfayock https://twitch.tv/colbyfayock ✉️ Or a newsletter right to your inbox! https://www.colbyfayock.com/newsletter/ 💝 Sponsor me for more free content like this! GitHub: https://github.com/sponsors/colbyfayock Other: hello@colbyfayock.com 👨‍🚀 Brought to by colbyfayock.com https://www.colbyfayock.com/ 🎥 Want to know what A/V equipment I use? https://www.colbyfayock.com/uses 🧰 More Resources Next.js Demo Video List Starter https://github.com/colbyfayock/demo-video-list-starter Cloudinary JS URL Gen SDK https://cloudinary.com/documentation/javascript_integration Cloudinary React SDK https://cloudinary.com/documentation/react_integration Automated Generation of Intelligent Video Previews on Cloudinary’s Dynamic Video Platform https://cloudinary.com/blog/auto_generate_video_previews_with_great_results_every_time 🎼 Music Music from Uppbeat (free for Creators!): https://uppbeat.io/t/mountaineer/seawater License code: R7P1WMVQWC4QTEYH #colbyfayock #cloudinary #react #video #effects #thumbnails #webdevelopment