Video Preview on Hover in React with Cloudinary

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-g... 🔔 Subscribe for more tech and developer videos https://www.youtube.com/colbyfayock?s... 🐦 Get updates straight to your Twitter @colbyfayock   / colbyfayock   📸 Catch the next stream live on Twitch @colbyfayock   / 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: [email protected] 👨‍🚀 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-v... Cloudinary JS URL Gen SDK https://cloudinary.com/documentation/... Cloudinary React SDK https://cloudinary.com/documentation/... Automated Generation of Intelligent Video Previews on Cloudinary’s Dynamic Video Platform https://cloudinary.com/blog/auto_gene... 🎼 Music Music from Uppbeat (free for Creators!): https://uppbeat.io/t/mountaineer/seaw... License code: R7P1WMVQWC4QTEYH #colbyfayock #cloudinary #react #video #effects #thumbnails #webdevelopment