{"id":17355,"date":"2019-11-27T14:37:10","date_gmt":"2019-11-27T14:37:10","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=17355"},"modified":"2023-07-28T08:10:14","modified_gmt":"2023-07-28T08:10:14","slug":"jetengine-how-to-display-a-video-in-the-listing-dynamically","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-display-a-video-in-the-listing-dynamically\/","title":{"rendered":"How to Display Video via Dynamic Field and Dynamic Tag in the Listing Template"},"content":{"rendered":"\n<p>It&#8217;s a common situation when you want to display the video in your Listing Template and then Listing Grid. However, it can be complicated to decide how to perform it because the Media-type field is not suitable for that task. From this tutorial, you will learn several ways of adding the video to the Listing Template; either you have it stored in the media gallery or want to display it directly from a popular media portal like YouTube or Vimeo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"uploading-video-from-wp-media-library\">Uploading Video from WP Media Library<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h3 class=\"wp-block-heading\" id=\"adding-the-meta-field\">Adding the meta field<\/h3>\n\n\n\n<p>There are two sources you can use: <strong>Custom Post Type<\/strong> and <strong>default post type<\/strong>. Before we start adding meta fields please ensure that you have them. This <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-create-a-custom-meta-field-with-jetengine-custom-meta-field-types-overview\/\" target=\"_blank\" rel=\"noopener noreferrer\">tutorial<\/a> uncovers the actions you should perform to add meta fields to the Custom Post Type, and it\u2019s recommended to choose the <strong>Text<\/strong> type.<\/p>\n\n\n\n<p>If you need to add a meta field to the default WordPress Posts, we recommend you to go to the <strong><em>JetEngine &gt; Meta Box<\/em><\/strong>, create a new Meta Box and then attach it to the <strong>Posts<\/strong>. Check <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-add-the-custom-meta-fields-to-the-posts\/\" target=\"_blank\" rel=\"noreferrer noopener\">this tutorial<\/a> for more details about adding custom meta fields to the default WP posts.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/02\/video-meta-field.png\" alt=\"video meta field\">\n\n\n\n<h3 class=\"wp-block-heading\" id=\"adjusting-the-video-to-the-post\">Adjusting the video to the post<\/h3>\n\n\n\n<p>The next what you need to perform is to adjust the link of the video to the post where you want it to appear.<\/p>\n\n\n<div class=\"note-banner d-flex border-bold border-jetsmartfilters rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M1 21H23L12 2L1 21ZM13 18H11V16H13V18ZM13 14H11V10H13V14Z\" fill=\"#FA5450\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Warning<\/div><p class=\"m-0\">Make sure that you have prepared videos on the hard drive.<\/p><\/div><\/div>\n\n\n\n<p>Now, go to <em style=\"\"><b>WP Dashboard &gt; Media<\/b><\/em>, hit the &#8220;Add new&#8221; button, and upload the video to your library. Click on the uploaded video and on the right sidebar you will see the link &#8211; copy it to the clipboard.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/02\/copy-url-video.png\" alt=\"copy the video's URL\">\n\n\n\n<p>Proceed to the post editing window and enter the link to the corresponding meta field. Afterward, click the &#8220;<strong>Update<\/strong>&#8221; button to save the changes.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/02\/video-field-filling.png\" alt=\"add the link\">\n\n\n\n<h3 class=\"wp-block-heading\" id=\"displaying-the-video-in-a-listing\">Displaying the video in a listing<\/h3>\n\n\n\n<p>There are two options you may choose to pull the video: <\/p>\n\n\n\n<ul>\n<li>with the help of <strong>HTML<\/strong> code;<\/li>\n\n\n\n<li>via the <strong>Video<\/strong> widget.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"showing-the-video-using-the-html-code\">Showing the video using the HTML code<\/h3>\n\n\n\n<p>After the previous actions are done, it\u2019s time to arrange the existing content of the posts. In this step, we will not dive into the details on how to create a <strong>Listing Template<\/strong>, because all of them are already available <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-listing-functionality-how-to-create-a-new-listing-to-apply-for-the-certain-post-type\/\">here<\/a>.<\/p>\n\n\n\n<p>We will use the <strong>Dynamic Field<\/strong> widget. Choose the &#8220;Meta Data&#8221; option in the <strong>Source<\/strong> drop-down menu, and in the Meta Field, select specify the one where you added the link of the video.<\/p>\n\n\n\n<p>Then, you need to enable the <strong>Customize field output<\/strong> toggle. In the following <strong>Field format<\/strong> text area, you should enter <a href=\"https:\/\/github.com\/bormotova23\/luminousity\/blob\/master\/video-mp4\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">this<\/a> HTML code to display the video in .mp4 format.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/02\/ideo-through-html.png\" alt=\"adding video with the help of HTML\">\n\n\n\n<p>The line with the source varies depending on the video format that you want to use.<\/p>\n\n\n\n<ul>\n<li>For the .ogv video, it will be <a rel=\"nofollow noopener noreferrer\" href=\"https:\/\/github.com\/bormotova23\/luminousity\/blob\/master\/video-ogv\" target=\"_blank\">this<\/a> one;<\/li>\n\n\n\n<li>For the <strong>.webm<\/strong> format of the video, the code will be of <a rel=\"nofollow noopener noreferrer\" href=\"https:\/\/github.com\/bormotova23\/luminousity\/blob\/master\/video-webm\" target=\"_blank\">this<\/a> kind.<\/li>\n<\/ul>\n\n\n\n<p>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 <code>%s<\/code> macros and now it outputs the meta field values.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"showing-the-video-with-the-video-widget\">Showing the video with the Video widget<\/h3>\n\n\n\n<p>Drag-n-drop the <strong>Video<\/strong> widget to the page, and in the Source drop-down menu, choose the &#8220;Self Hosted&#8221; option. Enable the External URL toggle and click on the &#8220;Dynamic tags&#8221; button in the right corner of the next field. Choose the &#8220;Custom Field&#8221; JetEngine option. Click the field once again, and in the Field drop-down list, select the meta field with the video URL.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/02\/video-through-tags.png\" alt=\"showing video via video widget\">\n\n\n\n<p>Adjust the other settings to customize the video playing.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"displaying-video-from-a-thirdparty-platform\">Displaying Video from a Third-party Platform<\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h3 class=\"wp-block-heading\" id=\"adding-the-meta-fields\">Adding the meta fields<\/h3>\n\n\n\n<p>This step duplicates the steps from the first part of this tutorial. More information about creating meta fields you can find in this detailed <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-create-a-custom-meta-field-with-jetengine-custom-meta-field-types-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">overview<\/a>. Also, make sure that you have created the Text-type meta field.<\/p>\n\n\n\n<p>Now you need to insert the video link from the YouTube or Vimeo hosting source to the meta field of every post.<\/p>\n\n\n\n<img src=https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/02\/youtube-url-insert.png\" alt=\"adding youtube link\">\n\n\n\n<h3 class=\"wp-block-heading\" id=\"displaying-the-video-in-the-listing\">Displaying the video in the listing<\/h3>\n\n\n\n<p>To showcase the video in the listing, you need to go to <strong><em>JetEngine &gt; Listings<\/em><\/strong>, create the new one, and open it in the Elementor editor. Once again, we will be working with the <strong>Dynamic Field<\/strong> widget, so find and drop it to the page.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/02\/video-youtube.png\" alt=\"adding youtube video\">\n\n\n\n<p>In the <strong>Source <\/strong>drop-down menu, choose the &#8220;Meta Data&#8221; option, and in the Meta Field list, choose the field where you placed the URL. Afterward, enable the <strong>Filter field output<\/strong> toggle and choose the &#8220;Embed URL&#8221; option.<\/p>\n\n\n\n<p>After the video is chosen, it\u2019s time to play around with the additional features in the <strong>Style <\/strong>tab.<\/p>\n<\/div><\/div>\n\n\n\n<p>That&#8217;s it. You now learned how to display videos in the Listing grid dynamically using JetEngine functionalities.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 using JetEngine functionality.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[388],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Ways to Display Video Dynamically \u2014 JetEngine | Crocoblock<\/title>\n<meta name=\"description\" content=\"Find comprehensive guidance on how to showcase different kinds of videos in listing dynamically. Easy-to-follow steps will help to play around with videos.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-display-a-video-in-the-listing-dynamically\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ways to Display Video Dynamically \u2014 JetEngine | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Find comprehensive guidance on how to showcase different kinds of videos in listing dynamically. Easy-to-follow steps will help to play around with videos.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-display-a-video-in-the-listing-dynamically\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2023-07-28T08:10:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/02\/video-meta-field.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-display-a-video-in-the-listing-dynamically\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-display-a-video-in-the-listing-dynamically\/\",\"name\":\"Ways to Display Video Dynamically \u2014 JetEngine | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-11-27T14:37:10+00:00\",\"dateModified\":\"2023-07-28T08:10:14+00:00\",\"description\":\"Find comprehensive guidance on how to showcase different kinds of videos in listing dynamically. Easy-to-follow steps will help to play around with videos.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-display-a-video-in-the-listing-dynamically\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-display-a-video-in-the-listing-dynamically\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-display-a-video-in-the-listing-dynamically\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How to Display Video via Dynamic Field and Dynamic Tag in the Listing Template\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Ways to Display Video Dynamically \u2014 JetEngine | Crocoblock","description":"Find comprehensive guidance on how to showcase different kinds of videos in listing dynamically. Easy-to-follow steps will help to play around with videos.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-display-a-video-in-the-listing-dynamically\/","og_locale":"en_US","og_type":"article","og_title":"Ways to Display Video Dynamically \u2014 JetEngine | Crocoblock","og_description":"Find comprehensive guidance on how to showcase different kinds of videos in listing dynamically. Easy-to-follow steps will help to play around with videos.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-display-a-video-in-the-listing-dynamically\/","og_site_name":"Help Center","article_modified_time":"2023-07-28T08:10:14+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/02\/video-meta-field.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-display-a-video-in-the-listing-dynamically\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-display-a-video-in-the-listing-dynamically\/","name":"Ways to Display Video Dynamically \u2014 JetEngine | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-11-27T14:37:10+00:00","dateModified":"2023-07-28T08:10:14+00:00","description":"Find comprehensive guidance on how to showcase different kinds of videos in listing dynamically. Easy-to-follow steps will help to play around with videos.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-display-a-video-in-the-listing-dynamically\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-display-a-video-in-the-listing-dynamically\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-display-a-video-in-the-listing-dynamically\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"How to Display Video via Dynamic Field and Dynamic Tag in the Listing Template"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/17355"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=17355"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=17355"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=17355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}