Auto Play Videos on Hover (Elementor Tutorial)

September 11, 2023

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>
				
			

Plugins Used in Video:

*Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to continue providing free content and educational resources for you. Thank you for supporting our small business!

Share this post:

Facebook
Reddit
Twitter
Pinterest
LinkedIn
Email

More Free Resources