Here’s a simple, free method to create a mixed-media loop grid in Elementor that combines images and self-hosted videos — and even includes titles, excerpts, or buttons — using Advanced Custom Fields (ACF). You don’t need ACF Pro; the free version works perfectly. Follow these steps to build an engaging, interactive gallery in no time.
What you’ll need
- WordPress with Elementor (templates / loop grid capability)
- Advanced Custom Fields (free) installed
- A custom post type for your gallery (created via ACF or another method)
- Small, optimised self-hosted videos (or external URLs if you prefer)
Overview
Conceptually, we create a custom post type (Gallery), add two ACF fields (one image and one video file URL), then build an Elementor loop grid template that pulls those fields dynamically. The template contains both an image widget and a video widget in the same container; CSS and widget positioning ensure the video takes priority when present and the image acts as a poster/fallback.
Step 1 — Create the custom post type
In ACF, add a new post type called gallery (singular label: gallery). You can remove the default editor and/or featured image if you won’t use them, but it’s fine to leave them enabled. Save the post type — it will appear in the WordPress sidebar.
Step 2 — Create the ACF field group
Create a field group (example name: Gallery fields) and add two fields:
- G_image — Field type: Image. This will be the fallback/poster image.
- G_video_URL — Field type: File. IMPORTANT: set the return type to File URL so Elementor can use it as a video source easily.
Set the field group location rule to show when post type is equal to gallery. Save the field group.
Step 3 — Add gallery items
Add new Gallery posts and populate the ACF fields. You can:
- Add only an image (G_image)
- Add only a video (G_video_URL)
- Add both — the template will prioritise video and use the image as the poster/fallback
Tip: keep self-hosted videos small (1–5MB) if you plan to show multiple videos on a page to avoid a heavy page load. Mixed image/video grids minimise load issues.
Step 4 — Build the loop grid in Elementor
Create a loop grid template (for example a 3-column layout with however many items you want visible). Set the query source to your gallery post type. Inside the loop item template use a container set to column layout and a fixed height appropriate for your design (we’ll use a 16:9 ratio example below).
Step 5 — Add the image widget (ACF image field)
- Drop an Image widget into the container.
- Under Image source use the dynamic tag → ACF Image Field → select the key G_image.
- Do not hard-set width/height in the widget controls. Instead we’ll control sizing with CSS (below).
- In the Advanced tab set Position to Absolute and set top: 0; left: 0; (so it fills the container). Give it a Z-index of 1.
Step 6 — Add the video widget (ACF file URL)
- Drop a Video widget below the image in the same container.
- Choose Self‑Hosted and in the video source use dynamic tag → ACF URL Field → select the key G_video_URL.
- Enable Autoplay, Muted, Loop, and optionally Show Controls and Play on Mobile as needed.
- For Poster image use dynamic tag → ACF Image Field → key G_image so the image is the fallback while the video buffers.
- In Advanced set Position to Absolute, top: 0; left: 0; and set Z-index to a higher value (for example 99) so the video sits above the image when present.
- Ensure the video is set to full width inside that container.
Step 7 — CSS for consistent aspect ratio and image fitting
To make images and videos visually identical size (avoid tiny misalignments) use an aspect ratio approach rather than setting multiple widths/heights. Example CSS to add to the Image widget (Advanced → Custom CSS if you have Elementor Pro, or your theme/custom stylesheet):
selector img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
object-position: center top;
}
If you prefer portrait or square, change the aspect ratio (for portrait use 9/16, for square use 1/1). This approach is robust across desktop, tablet and mobile and avoids inconsistent cropping when image proportions differ.
How the layering works
- Both image and video are absolutely positioned inside the same container, aligned at top:0; left:0; right:0;
- Image has Z-index: 1 (fallback)
- Video has Z-index: 99 (priority)
- If only an image exists, you see the image. If a video exists, it plays on top of the image and the image acts as poster/backup.
Adding title, excerpt or button overlays
Want a post title or CTA on top of the media? Add those widgets inside the container and position them absolutely with offset values. For example:
- Heading widget → dynamic → Post Title. Advanced → Position: Absolute; bottom: 0; left: 0; right: 0; add a bottom offset (e.g. 40px) to sit above a button. Add a high Z-index so it’s visible over the media.
- Button widget → Position: Absolute; bottom: 0; left/right: position as required; Z-index above the media.
Adjust offsets for tablet/mobile to keep spacing tidy. Once set, this layout lets you mix products, demo videos, or regular images with titles and CTAs — a very engaging gallery format.
Performance and best practices
- Self‑hosted videos: keep them short and optimised. If you have 10–20 items visible with large videos it can affect load time.
- Mix images and videos; the more images, the lighter the page.
- Use the poster image (ACF image field) to avoid visual flicker while videos load.
- Test on desktop, tablet and mobile and tweak container height and aspect ratio per breakpoint.
Conclusion
Using Elementor and the free ACF plugin you can build an attractive mixed-media loop grid that prioritises video while keeping images as fallbacks. The key points are:
- Create a gallery post type and two ACF fields (image + file URL).
- Build an Elementor loop template with both Image and Video widgets, populated via dynamic ACF tags.
- Use CSS aspect-ratio and absolute positioning + z-index to layer media correctly and guarantee consistent sizing.
This approach makes galleries feel modern and immersive — perfect for product showcases, portfolios or blog thumbnails that want to stand out.
FAQ
Do I need ACF Pro to follow this method?
No. You can do everything described here with the free Advanced Custom Fields plugin. Use a File field that returns the File URL for the video field.
Can I use YouTube or external video URLs instead of self-hosted files?
Yes. You can use external URLs (YouTube, Vimeo) — but poster behaviour and autoplay support vary by provider and browser. Self-hosted files give the most control for autoplay and muted looping visuals.
What aspect ratio should I use?
Pick an aspect ratio that suits your design. I used 16:9 for landscape examples. Use 9:16 for portrait or 1:1 for square. Apply the same ratio to both image and video for consistent layout.
Won’t videos slow the page down?
Only if the files are large and many videos are loaded at once. Keep videos short, compressed and mix with images to reduce impact. Poster images also help user perception while media loads.
How do I make the video autoplay and mute?
Set autoplay and mute in the Video widget settings in Elementor. Most browsers require videos to be muted for autoplay to work reliably.
If you want the exact CSS snippet I use for image aspect ratio, paste this into your CSS area (or in Elementor Pro’s widget Custom CSS):
selector img {
width: 100%;
aspect-ratio: 16/9;
object-fit: cover;
object-position: center top;
}
