In this Elementor tutorial I will show you how to create a video hover grid showcase. This can be a great way to showcase your video or animation projects. I will show you 2 ways to pull this off.
The first way will be a static version where you can place this video hover effect anywhere on your website.
The second way will be more dynamic and using ACF, Code Snippets and the Loop Grid.
Timestamps:
- 0:00 Introduction
- 0:31 Static Video Grid Tutorial Begins
- 4:18 Dynamic Loop Grid Tutorial Begins
- 5:24 ACF Post Type (Loop Grid)
- 6:16 ACF Field Groups (Loop Grid)
- 8:22 Video Hover Code Snippet (Loop Grid)
- 10:45 Setup Loop Grid Widget and Template
- 13:35 *Bonus* Looping Video Hover Effect
Static Video Hover Code:
<video muted onmouseover="this.play()" onmouseout="this.pause(); this.currentTime=0;" poster="video1.jpg">
<source src="video1.mp4" type="video/mp4">
</video>
Dynamic Video Hover Code:
<video loop muted onmouseover="this.play()" onmouseout="this.pause(); this.currentTime=0;" poster="<?php the_field('hover_thumbnail'); ?>">
<source src="<?php the_field('hover_video'); ?>" type="video/mp4">
</video>
