Back to contents

JetEngine: How to Display a Video in the Listing Dynamically

This tutorial will uncover how to add the video to the listing in a dynamic way either from the WordPress media library or from the webportal.

It’s a common situation when you want to display the video in your listing and it can be complicated to decide how to perform it. As you might have the videos kept on the hard drive and then in the media gallery and want them to display. Or you may have your videos stored on the global webportals and want them to be shown as the additional information for a certain post.

Uploading video from WP Media library

1 Step — Adding the meta field

There are two sources you can use: Custom post type and default post type. Before we start adding meta fields please ensure that you have them. This tutorial uncovers the actions you should perform to add meta fields to the Custom post type and it’s recommended choosing the Text type.

If you need to add a meta field to the default WordPress Posts, we recommend you to go to the JetEngine > Meta Box and create a new one here with attaching it to the Posts.

text meta field for the video format

2 Step — Adjusting the video to the post

The next what you need to perform is to adjust the link of the video to the post where you want it to appear.

Ensure that you have prepared videos on the hard drive.

Now, go in WP Dashboard > Media > Add new and upload the video to your library. Click the video icon representation and on the right sidebar you will see the link – copy it to the clipboard.
Proceed to the post editing and enter the link to the corresponding meta field.
Update the changes.

insert a link from the library

3 Step — Displaying the video in a listing

    There are two options you may choose to pull the video:

  • with the HTML code;
  • with the Video Playler widget.

Way 1 – Showing the video from the library with the HTML code

After the previous actions are done, it’s time to arrange the existing content of the posts into the attractive appearance.

In this step we will not dive into the great details on how to create a listing, because all of them are already available here.

Now we will stop on the way how to display the video from the media gallery.

For this purpose, let’s use the Dynamic Field widget and choose the Meta Data in the Source dropdown menu. In the following field specify the exact one from the list of the available ones.

video from the dynamic field

Then, you need to enable the Customize field output option. In the following Field format you should enter this HTML code for the .mp4 video format.

The line with the source varies depending on the video format that is using.

  • For the .ogv video it will be this one.
  • For the .webm format of the video the code will be of this kind.

In the code line with the source we could have inserted the link as it was, but in this case the same video would appear on every and each post. To keep the dynamic content representation, we inserted the %s macros and now it outputs the meta field values from the posts as it exactly must work.

The width and height parameters can be also set in the way you want to display your video and there is no ready decisions, everything can be changed to meet you needs.

What about the other code transformation, it’s advisable to remain everything else untouchable so it could work correctly.

Way 2 – Showing the video with the Video Playlist widget

Drag-n-drop the Video Playlist widget to the working canvas and on the Content > Video tab choose the Self Hosted option.

In the Player dropdown menu you will be able to choose any player that you want to: Default HTML5 or MediaElement Player.

On the Self Hosted URL field you can choose the video file from the WordPress library or use the Dynamic option for the implementation.

Adjust the other settings to customize the video playing.

self-hosted video

Displaying video from video hosting webportal

1 Step — Adding the meta field

This step duplicates the steps from the first part of this tutorial and implies simple meta field creating for the Custom Post type or adjusting the Meta Box to the Posts themselves.

More information about meta fields can be found here on the Basic Settings block.

Ensure that you have set the Text type as the meta field type.

text meta field for the video dispalying

2 Step — Adjusting the video to the post

Here you need to insert the video link from the YouTube or Vimeo hosting source to the meta field into each post.

Adjusting the video to the post

3 Step — Displaying the video in a listing

To showcase the video in the listing, you need to go to JetEngine > Listings and in the listing area drag-n-drop the Video Player widget which includes into the JetElements plugin.

On the Video tab > Video Type dropdown menu you can choose whether YouTube or the Vimeo source.

The next field implies entering the link itself. As we are going to use the dynamic options, we need to choose the Dynamic and choose from the dropdown menu the needed custom field.

youtube video displaying

After the video is chosen it’s time to play around with the additional features for the video showing.