Home » How To Dynamic iFrame URL In Elementor

How To Dynamic iFrame URL In Elementor

Last updated on June 6, 2021 by

In this tutorial, we will see how to dynamic the iframe URL in Elementor. Sometimes, we need to dynamic the iframe in the page, post, or custom post type. Let’s just jump into it.

Steps To Make Dynamic Iframe In Elementor

Before diving into the steps, let’s assume that we have a Services custom post type just like posts or page in our WordPress install.

Now, we want to dynamic the iframe in each single service page using Elementor.

  1. At the very first, we need to add a new custom field into our Services custom post type. You can add it as per your requirement.

    There are different ways to add the custom fields in WordPress but to make it easy, we are using the Advanced Custom Field plugin to create the custom field in WordPress.
  2. First, install the Advanced Custom Field plugin, and to create a new custom field go to the Custom Fields -> Add New
  3. Add custom fields title and then add the new custom field by pressing the Add Field button. After that, add Field Label (“iFrame URL” in our case) and Choose the Field Type to Text input just like the below screenshots.
add custom field to dynamic iframe in elementor
  1. Then assign the created custom fields to the page, post, or custom post type as shown below screenshot. In our case, we need to assign it to the Services custom post type.
assign custom fields to post or page in wordpress
  1. Let’s add a dummy URL into our newly created field. To do that navigate to the assigned page or post, in our case Services -> Add New or Edit and add any URL you want to show as an iFrame then save the post or page.
add custom field value in wordpress
  1. Now, go to the Elementor editor on your particular page or Single post template, in our case we need to edit the Single Service page Elementor template. You can create your own by Templates > Add New

    After that drop & drop the Text Editor widget and click on Dynamic Tags and select ACF Field option as shown in the following screenshot.
select dynamic tags in elementor
  1. It will automatically close the select box but click again on it and in Key option select the ACF field that we created in the previous step, in our case we have created the iFrame URL field so select that as shown in the below screenshot.
select iframe url field in elementor
  1. Now, we are very near to end of this tutorial, click on Advanced accordion and you will see the before, after and callback option.

    We now need to divide our iframe code into two parts. Let’s assume our iframe code looks like below:
<iframe width="900" height="506" src="https://www.youtube.com/embed/9xwazD5SyVg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  1. The first part will be <iframe width="900" height="506" src=" and need to be inserted into the before option.
  2. And the second part will be (including double quotation) " title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> and needs to be inserted into the after option.
place iframe code in before and after option in elementor
  1. This way our URL will be placed between the before and after option, thus our iFrame will be completed with the dynamic URL in Elementor.

Output:

dynamic iframe in elementor output

Additionally, read our guide:

  1. How To Add Back Button In Elementor
  2. 403 Error When Updating In Elementor
  3. How To Add Multiple Post Types In Posts Widget In Elementor
  4. How to Add Products Per Page Dropdown in WooCommerce
  5. “Sorry, your session has expired. Return to homepage” – WordPress WooCommerce Error
  6. How to Create a Plugin in WordPress from Scratch
  7. How to Disable Admin Bar in WordPress Without Plugin
  8. How To Send Custom Emails in WordPress
  9. How to Allow Preview of Draft Post Without Login in WordPress
  10. Import Users From CSV In WordPress Programmatically
  11. Dynamically Populate A Select Field’s Choices In ACF
  12. How To Create Database Table In WordPress
  13. Difference Of require, include, require_once And include_once
  14. PHP: Get Day Name From Date
  15. PHP: Get Year From Date

We hope this article helped you to make a dynamic iframe in Elementor

Please let us know in the comments if everything worked as expected, your issues, or any questions. If you think this article saved your time & money, please do comment, share, like & subscribe. Thank you in advance 🙂. Keep Smiling! Happy Coding!

 
 

Leave a Comment

*

code