Get a professional website for $99 per month. One week turnaround.

Auto Play Videos on Hover (Elementor Tutorial)

Home Elementor 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.


  • 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="" onmouseout="this.pause(); this.currentTime=0;" poster="video1.jpg">
<source src="video1.mp4" type="video/mp4">

Dynamic Video Hover Code:

					<video loop muted onmouseover="" onmouseout="this.pause(); this.currentTime=0;" poster="<?php the_field('hover_thumbnail'); ?>">
<source src="<?php the_field('hover_video'); ?>" type="video/mp4">

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!

More Free Resources