How to Display a Video in a Listing Template for a Repeater Field

Create a Repeater meta field

You can create a “Repeater” custom field in two ways. The first one is to add it via the Meta Box to post types, taxonomies, users, or WooCommerce products.

The second one is to add a “Repeater” meta field directly to a Custom Post Type.

For example, we proceed to the WordPress Dashboard > JetEngine > Post Types and edit the “JetPlugins tutorials” CPT.

Then, we scroll down to the Meta fields tab and press the “New Meta Field” button. We fill in the Label and Name/ID, and select the “Repeater” Field type.

Next, we click the “New Repeater Field” button. We fill in the Label and Name and choose the “Text” Type. In the following step, we’ll be able to add YouTube video URLs to this “Text” field. These URLs will later be embedded and displayed within a listing.

After that, you can add as many fields to the “Repeater” as required and save the CPT by clicking the “Add/Update PostType” button.

Complete Repeater fields within posts

Now edit each of your posts in your CPT, and paste the links to the videos into the “Repeater” fields.

New Listing for Repeater source

Go to WordPress Dashboard > JetEngine > Listings/Components and hit the “Add New Item” button.

We select the “Repeater Field” as the Listing source and adjust the next parameters:

• From post type — here, we select our CPT for which we created the “Repeater” field;
• Repeater source — contains three options:
  • JetEngine — if you created a “Repeater” meta field via JetEngine;
  • JetEngine Options Page — if you want to pull data from the previously created Options Page in JetEngine; 
  • ACF — if you created a “Repeater” meta field via the ACF plugin.
• Repeater field — specify the name of the “Repeater” meta field;
• Listing item name — give a name to a Listing;
• Listing view — select either to operate with the Listing in Elementor or WordPress Blocks editor (Gutenberg).

Then, click the “Create Listing Item” button.

Elementor settings

Place the Dynamic Field widget on the editing page.

Select the “Repeater Field” Source and enter the name of the “Text” meta field in the Object field / Meta field / Repeater key / Component prop bar.

To display the link as a video, toggle on the Filter field output and select the “Embed URL” option as the Callback. After those actions, the video will be displayed appropriately.

Also, the Style settings can be customized; for example, we alter the Field content width to “Full width”.

After that, the Listing can be saved by pressing the “Publish” button.

WordPress block editor settings

Drag and drop the Dynamic Field block on the editing page.

Select the “Repeater Field” SOURCE and enter the name of the “Text” meta field in the OBJECT FIELD / META FIELD / REPEATER KEY / COMPONENT PROP bar.

To display the link we put on the backend as a video itself, toggle on the Filter field output and select the “Embed URL” option as the CALLBACK.

To style up the Dynamic Field block, you can install and activate the free JetStyleManager plugin. Open the style settings by pressing the “paintbrush” icon.

After that, the Listing can be saved by pressing the “Save” button.