Play Video on Hover on a Static or Dynamic Elementor Page with ACF and Code Snippets

Ready to add a unique touch to your website? Let’s get your site to play video on hover. It’s a neat feature that can make your site stand out. Let’s dive straight in!

Static Video Grid: Play Video on Hover

1. Gathering Assets

Before we start, ensure you have all the necessary components:

• Video Size: Aim for videos around 1MB for better performance.

Tip: The smaller the video size, the faster it loads.

• Video Dimensions: Opt for 640×360 for optimal display across devices.
• Thumbnails: Compressed thumbnails are essential for quick loading.

2. Setting up the Static Grid

Here’s how to set up the grid:

• Use Elementor’s container system.
• Place an HTML widget for the video hover effect with the following code:

  <video muted onmouseover="this.play()" onmouseout="this.pause(); this.currentTime=0;" poster="your_thumbnail_url_here">
  <source src="your_video_url_here" type="video/mp4">
  </video>

  Source: Wicky Design

• Replace your_thumbnail_url_here with your video’s thumbnail and your_video_url_here with your video’s URL.

Video Play on Hover with the Elementor Loop Grid and ACF:

1. Setting up Custom Post Types with ACF

1. Create a custom post type via ACF Post Type > Add new > name it “Work”.
2. Set up ACF field groups for video hover and video thumbnail.

2. Use a Code Snippet for Dynamic Rendering

1. Use the Code Snippets plugin to create an HTML snippet.
2. Copy and paste the following code into your code snippet and save it:

   <video 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>

   Source: Wicky Design

3. Replace hover_thumbnail and hover_video with your ACF field names.
4. Copy the shortcode of the code snippet for the next step.

3. Setting up the Loop Template in Elementor

1. Enable the following features in Elementor (Elementor > Settings > Features):
   – Flexbox Container
   – Loop
2. Design the loop template with the shortcode (paste the code snippet shortcode here) and post title.
3. Configure the loop grid, ensuring the query source is set to “Work”.
4. You can also link the video by selecting the container, and go to “Layout” > “Additional Options” > “Link”.

4. Looping the Video Hover Effect

For continuous playback:

1. Add the loop attribute to the video tag:

   <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>

2. Test the looping effect.

Wrapping Up

And that’s how you set up your site to play video on hover and ensure video play on hover functionality. It’s a feature that can truly make your site unique. Give it a try and see the difference it makes.