In this tutorial, we are going to create a loop grid with videos that play on hover (on desktop) and on scroll (on tablet and mobile).
See the demo in action here:
Features:
- Ideal for portfolios
- Videos play on hover on desktop
- Videos play on scroll, when in view, on mobile
- (optional) There is an image on top of the video to start with, which can represent the first frame (has in my demo) or could be any image at all (such as a video feature image)
- We are using the Elementor Loop Grid element here, so items can be made clickable to link to the Single Post page, or anywhere else (such as TikTok or YouTube)
- The videos are self hosted (required for smooth results), you will need to compress them well and self host efficiently. See my tutorial about self hosting video files with BunnyCDN. If your videos are small enough, they can be directly in your media library too.
We are going to use the free version of ACF to create the CPT and the custom fields, however you could also use any Custom Fields plugin, such as JetEngine, Metabox, Pods, Toolset, etc.
Let's get started!
First, get Custom Post Type setup and ready
This is a premium tutorial. Purchase access to unlock the full tutorial and access the template files.