How to Display a Video in Listing Template for Repeater Field

Create CPT with repeater meta field

First thing, create a Custom Post Type. In our tutorial, we’ll have a CPT “Tours”. More detailed information can be found in our CPT creation tutorial.

Once you’ve got your CPT done, you need to create a Repeater meta field where we’ll embed our links for videos. A comprehensive guide is presented in this tutorial.

In this step, we’ll create a new Repeater meta field for our Tours CPT.

So, we created a Repeater meta field type with a Text item inside. In the next stage, we’ll be able to add links to YouTube videos to that Text field within the Repeater meta field. You can add as many text items as you need.

Complete repeater fields within posts

Now edit each of your posts in your CPT (Tours in our example), and paste the links to the videos into the Repeater fields. Here’s our example:

New listing for repeater source

Go to JetEngine> Listings>Add New.

Now select the Repeater Field as a source for this Listing. Fill in the next parameters attentively:

• From post type – your CPT for which you created the repeater field;
• Repeater source contains three options:

1. JetEngine – if you created a repeater meta field via JetEngine;
2. JetEngine Options page – if you want to pull data from the previously created Options Page in JetEngine; 
3. ACF — if you created a repeater meta field via the ACF plugin.

• Repeater field — specify the name of your Repeater meta field;
• Listing item name — give a name to a Listing;
• Listing view — select either to operate with the listing in Elementor or Blocks editor (Gutenberg).

Let’s take a look at the Elementor page Builder as a source. Keep in mind that the settings can be then handled by clicking on the gear-shaped button in the left bottom corner of the menu.

Adjust Elementor settings

In the previous step, you successfully created a Listing for Repeater.  Now you’re transferred to the Elementor editor page. Let’s see how to show videos that we added to a Repeater meta field. Drag and drop the Dynamic Field widget.

In the Source field, select the “Repeater Field” option. Also, specify the repeater’s meta field in the Custom meta field/repeater key field. In our example, we displayed the “video” repeater key. In order for the link we put on the backend could be shown as a video itself, we need to toggle on the Filter Field Output and select the Embed URL option. Only after those actions the video will be displayed in an appropriate way.

Working with listing grid widget on single post template

We’ve adjusted the Listing Template, and it’s time to display it in the Listing Grid widget. Edit your Single template (created either in JetThemeCore or in Elementor Pro) in Elementor and drop the Listing Grid widget.

Type in the name of the Listing for Repeater you previously created for the Repeater meta field and set up the number of columns, posts, and other parameters.

To check how your Listing Grid for Repeater Listing looks on the front end, open any Post in a new tab and see that it displays the grid of the videos added accordingly.