Generate AI based video previews and play it on hover

Cloudinary offers an intelligent automatic generation of video previews to give viewers a preliminary look at the most interesting content. Couple that with being able to play the video on a user hovering over the content, can reduce the overall bandwidth, improve page load times, and attract more views and clickthroughs.

Requirements:

• Cloudinary - To generate the video preview
• HTML 
• JavaScript - To add events that trigger mouseover and mouseout events.  

Here is a working example of how easy it is.

Note: As this CodeSandbox embed is within an iframe and the example sandbox app is within an iframe itself, to see the preview on hover, please click anywhere in the sandbox (white padding around the video) and then hover.

How do you generate an AI-based video preview?

All you need to do is add the parameter `effect` with `preview` (`e_preview` in URLs):
https://res.cloudinary.com/demo/video/upload/e_preview/baking_pastries

Documentation: Generate AI-based video previews

Blog: Auto-generate video previews with great results every time