Back to contents

JetEngine. How to display a video using Dynamic Repeater widget

Keep reading this tutorial in case you want to learn how to display a video on the page using JetEngine functionality.

With the Dynamic Repeater widget of JetEngine plugin you can showcase a video from the repeater meta field using special macros. We are going to provide an example based on showing an embed video of the post included in the Tour custom post type. al

Displaying a video

1 Step – Creating a meta box

We start with creating the Video meta box, which includes the Presentation repeater meta field. We go to the JetEngine > Meta Boxes block in the Wp Dashboard and click the Add New option. The settings window will appear right here, where we should define the meta box title, specify the Posts in the Meta Box for field and enable this meta box for the Tour CPT.

video meta box

2 Step — Adding a video repeater meta field

Then, we click the Meta fields tab below and add a new meta field (Presentation) to the Video meta box. In the Field type we choose the Repeater option. In the showed window we click the New Repeater Field button and enrich the Label and Name fields, and also select the Type: Text.

repeater meta field

3 Step — Editing a custom post

Now we open the Tour CPT in the WP Dashboard and proceed to edit the Beauty of Italy custom post. In the video repeater field we insert the link to the video on YouTube.

presentation field cpt

4 Step — Creating a listing

On the next stage we create a new listing in the JetEngine > Listings block in the WP Dashboard. We set the listing settings and call it “Tour listing“.

tour listing

5 Step — Setting the Dynamic Repeater widget

Now we enrich it with the Dynamic Repeater widget in Elementor. In the widget’s settings we select the Source: Presentation and paste the %video|embed_url% macros in the Item format box, where video is the name of the repeater meta field.

dynamic repeater widget video

6 Step — Using the Listing Grid widget

We edit the page, where we want to present a listing, in Elementor editor and insert the Listing Grid widget in it. In the Content > General tab of the widget’s settings we choose the created listing, Tour listing, and apply varied content and style settings.

listig grid video

7 Step — Viewing the video on the frontend

Let’s view how it looks ot the frontend.

listing on the frontend with video

Well done! Embed video to your website using the Dynamic Repeater widget of JetEngine plugin.