{"id":37196,"date":"2023-03-03T16:00:43","date_gmt":"2023-03-03T16:00:43","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=tips-and-tricks&#038;p=37196"},"modified":"2026-02-11T13:39:01","modified_gmt":"2026-02-11T13:39:01","slug":"cannot-display-iframe-with-dynamic-widgets","status":"publish","type":"tips-and-tricks","link":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/cannot-display-iframe-with-dynamic-widgets\/","title":{"rendered":"Cannot Display Iframe with Dynamic Widgets"},"content":{"rendered":"\n<p>The problem with the display may appear due to security reasons. The content of the meta field allows the output of only allowed HTML tags. That\u2019s why other needed HTML tags should be allowed to fix it.<\/p>\n\n\n\n<p>Initially, add a meta field in the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-create-a-custom-post-type-based-on-jetengine-plugin\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Custom Post Type<\/strong><\/a> editor or <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-group-the-custom-meta-fields-for-the-certain-post-types-into-meta-boxes\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>JetEngine Meta Box<\/strong><\/a><strong> <\/strong>if you haven\u2019t done it yet.<\/p>\n\n\n\n<p>The following cases will be presented via the Custom Post Type editor.<\/p>\n\n\n\n<h2 class=\"offset wp-block-heading\" id=\"textarea-field\"><strong>Textarea Field<\/strong><\/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<p class=\"mb-20\">Type in all the needed fields and choose \u201cTextarea\u201d as a <strong>Field type<\/strong>.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/textarea-meta-field-full.png\" alt=\"textarea meta field\">\n\n\n\n<p>Once the customization is done, click on the \u201c<strong>Update Post Type<\/strong>\u201d button.<\/p>\n\n\n\n<p>Proceed to the desired CPT post and complete the newly-created meta field with embeds where needed.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/embed-textarea-meta-field-full.png\" alt=\"embed textarea meta field\">\n\n\n\n<p>Update the post by pressing the button in the editor window\u2019s top right corner.<\/p>\n\n\n\n<p>There are two ways to allow the attributes for the input display.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"wordpress-theme-editor\"><strong>WordPress Theme Editor<\/strong><\/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<p>The first option is to paste the code directly to the WordPress Theme Editor.<\/p>\n\n\n\n<p>Head to<strong><em> Appearance &gt; Theme Editor<\/em><\/strong>. Choose the WordPress theme you are currently using<strong><em> <\/em><\/strong>and open its <strong>functions.php <\/strong>file.<\/p>\n\n\n\n<p>Paste the following code:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_filter( 'wp_kses_allowed_html', function ( $tags, $context ) {\nif ( 'post' === $context ) {\n$tags&#091;'input'] = array(\n'type' =&gt; true,\n'id' =&gt; true,\n);\n}\nreturn $tags;\n},10,2);<\/code><\/pre>\n\n\n\n<p>Type in the required attributes that have been used in the embed. For instance, the code we are using will look like this:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_filter( 'wp_kses_allowed_html', function ( $tags, $context ) {\nif ( 'post' === $context ) {\n$tags&#091;'iframe'] = array(\n'src' =&gt; true,\n'width' =&gt; true,\n'height' =&gt; true,\n'width' =&gt; true, \n'frameborder' =&gt; true,\n'allowtransparency' =&gt; true,\n'allow' =&gt; true,\n);\n}\nreturn $tags;\n},10,2);<\/code><\/pre>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/theme-editor-code-full.png\" alt=\"theme editor code\">\n\n\n\n<p class=\"offset\">We have deleted \u2018type\u2019 and \u2018id\u2019 attributes and added other ones presented in the embed.<\/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\">Change the \u2018iframe\u2019 value if you want to embed something else besides the iframe.<\/p><\/div><\/div>\n\n\n\n<p>Push the \u201c<strong>Update File<\/strong>\u201d button.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"code-snippets-plugin\"><strong>Code Snippets Plugin<\/strong><\/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<p>The second option is to use the <a href=\"https:\/\/codesnippets.pro\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Code Snippets<\/a> plugin (you can use any other similar plugin).<\/p>\n\n\n\n<p>Install and activate the plugin. Proceed to it by clicking on the <strong>Snippets <\/strong>tab on the WordPress Dashboard.<\/p>\n\n\n\n<p>Push the \u201c<strong>Add New<\/strong>\u201d button to open the code editor.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/code-snippets-add-new-full.png\" alt=\"code snippets add new\">\n\n\n\n<p>Paste the same code in the available fields and change the values to those you need.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/code-snippets-iframe-code-full.png\" alt=\"code snippets iframe code\">\n\n\n\n<p>Now push the \u201c<strong>Save Changes<\/strong>\u201d and \u201c<strong>Activate<\/strong>\u201d buttons.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"results-with-the-dynamic-field\">Results with the Dynamic Field<\/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<p>Navigate to the page you want to place the embed. This page should represent the one you have the iframe code added\u2014for instance, a single page of the CPT, as in this example.<\/p>\n\n\n\n<p>Add the <strong>Dynamic Field<\/strong> widget to the page. Set the \u201cMeta Data\u201d option<strong> <\/strong>as the <strong>Source<\/strong> and select the completed <strong>Meta Field<\/strong> in the corresponding drop-down menu.&nbsp;<\/p>\n\n\n\n<p>Or, you can add a <strong>Custom meta field\/repeater key <\/strong>that will override the <strong>Meta Field <\/strong>drop-down menu option.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/dynamic-field-in-the-elementor-editor-full.png\" alt=\"dynamic field in the elementor editor\">\n\n\n\n<p>The required field will now be displayed successfully. Style everything up if desired and save the changes by clicking the \u201c<strong>Update<\/strong>\u201d button.<\/p>\n\n\n\n<p>Let\u2019s take a look at the result on the front end. The problem with the textarea embed is now solved.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/dynamic-field-on-the-front-end-full.png\" alt=\"dynamic field on the front end\">\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"repeater-field\"><strong>Repeater Field<\/strong><\/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<p>If the meta field you create will be presented with the Repeater field type, its settings will look similar to those displayed below.&nbsp;<\/p>\n\n\n\n<p>So, go to the CPT or Meta Box and add a \u201cRepeater\u201d <strong>Field type<\/strong>. Once the primary values are set, click the \u201c<strong>New Repeater Field<\/strong>\u201d button.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/repeater-meta-field-full.png\" alt=\"repeater meta field\">\n\n\n\n<p>Add the needed amount of Textarea fields and complete the required <strong>Label<\/strong>, <strong>Name,<\/strong> and <strong>Type <\/strong>fields.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/new-repeater-field-full.png\" alt=\"new repeater field\">\n\n\n\n<p>Save the changes by pushing the \u201c<strong>Update Post Type<\/strong>\u201d button.<\/p>\n\n\n\n<p>Head to the CPT, open the desired page and find the Repeater meta field you have just added. Fill in the required number of embeds in the fields.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/embed-repeater-meta-field-full.png\" alt=\"embed repeater meta field\">\n\n\n\n<p>Push the \u201c<strong>Update<\/strong>\u201d button when all the changes have been made.<\/p>\n\n\n\n<p>Paste the mentioned code with the help of the WordPress Theme Editor or Security Snippets plugin, depending on your preferences. Follow the instructions described earlier in the Textarea Field article section.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"results-with-the-dynamic-repeater\"><strong>Results with the Dynamic Repeater<\/strong><\/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<p>Go to the page editor and place the <strong>Dynamic Repeater <\/strong>widget.&nbsp;<\/p>\n\n\n\n<p>Select the created repeater as the <strong>Source<\/strong> and change the <strong>Item format<\/strong>. Now we change the default %name% value into %song% that represents the <strong>Repeater field <\/strong>value we have added during the meta field editing.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/dynamic-repeater-in-the-elementor-editor-full.png\" alt=\"dynamic repeater in the elementor editor\">\n\n\n\n<p>Set the <strong>Style <\/strong>settings and push the \u201c<strong>Update<\/strong>\u201d button after all the customizations.&nbsp;<\/p>\n\n\n\n<p>Open the page on the front end to check the final results.<\/p>\n\n\n\n<img decoding=\"async\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/dynamic-repeater-on-the-front-end-full.png\" alt=\"dynamic repeater on the front end\">\n<\/div><\/div>\n\n\n\n<p>Now the issue is solved, and you have discovered how to embed inputs with any needed attributes.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Find out how to fix issues when added embed audio or videos are not displayed on the front-end.<\/p>\n","protected":false},"author":9,"featured_media":0,"template":"","format":"standard","tipstricks-tags":[359],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Cannot Display Iframe with Dynamic Widgets \u2014 JetEngine | Crocoblock<\/title>\n<meta name=\"description\" content=\"Discover how to fix the problem with the iframe tag in the JetEngine meta fields. Display any HTML code easily using dynamic widgets.\" \/>\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\/tips-and-tricks\/cannot-display-iframe-with-dynamic-widgets\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cannot Display Iframe with Dynamic Widgets \u2014 JetEngine | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Discover how to fix the problem with the iframe tag in the JetEngine meta fields. Display any HTML code easily using dynamic widgets.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/cannot-display-iframe-with-dynamic-widgets\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-11T13:39:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/textarea-meta-field-full.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=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/cannot-display-iframe-with-dynamic-widgets\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/cannot-display-iframe-with-dynamic-widgets\/\",\"name\":\"Cannot Display Iframe with Dynamic Widgets \u2014 JetEngine | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2023-03-03T16:00:43+00:00\",\"dateModified\":\"2026-02-11T13:39:01+00:00\",\"description\":\"Discover how to fix the problem with the iframe tag in the JetEngine meta fields. Display any HTML code easily using dynamic widgets.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/cannot-display-iframe-with-dynamic-widgets\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/cannot-display-iframe-with-dynamic-widgets\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/cannot-display-iframe-with-dynamic-widgets\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tips & tricks\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Cannot Display Iframe with Dynamic Widgets\"}]},{\"@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":"Cannot Display Iframe with Dynamic Widgets \u2014 JetEngine | Crocoblock","description":"Discover how to fix the problem with the iframe tag in the JetEngine meta fields. Display any HTML code easily using dynamic widgets.","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\/tips-and-tricks\/cannot-display-iframe-with-dynamic-widgets\/","og_locale":"en_US","og_type":"article","og_title":"Cannot Display Iframe with Dynamic Widgets \u2014 JetEngine | Crocoblock","og_description":"Discover how to fix the problem with the iframe tag in the JetEngine meta fields. Display any HTML code easily using dynamic widgets.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/cannot-display-iframe-with-dynamic-widgets\/","og_site_name":"Help Center","article_modified_time":"2026-02-11T13:39:01+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/03\/textarea-meta-field-full.png"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/cannot-display-iframe-with-dynamic-widgets\/","url":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/cannot-display-iframe-with-dynamic-widgets\/","name":"Cannot Display Iframe with Dynamic Widgets \u2014 JetEngine | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2023-03-03T16:00:43+00:00","dateModified":"2026-02-11T13:39:01+00:00","description":"Discover how to fix the problem with the iframe tag in the JetEngine meta fields. Display any HTML code easily using dynamic widgets.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/cannot-display-iframe-with-dynamic-widgets\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/cannot-display-iframe-with-dynamic-widgets\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/cannot-display-iframe-with-dynamic-widgets\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Tips & tricks","item":"https:\/\/crocoblock.com\/knowledge-base\/tips-and-tricks\/"},{"@type":"ListItem","position":3,"name":"Cannot Display Iframe with Dynamic Widgets"}]},{"@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\/tips-and-tricks\/37196"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/tips-and-tricks"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/tips-and-tricks"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/9"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=37196"}],"wp:term":[{"taxonomy":"tipstricks-tags","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/tipstricks-tags?post=37196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}