How To Dynamic iFrame URL In Elementor

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.

4. 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.

5. 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.

6. 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.

7. 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.

8. 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>

9. The first part will be <iframe width="900" height="506" src=" and need to be inserted into the before option.
10. 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.

11. 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:

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!