In this tutorial you are going to learn how to setup a dynamic iFrame with Elementor.
This is quite useful for Elementor Single Posts templates, where you might want to dynamically show an iFrame for a calendar, a form, a Vimeo or YouTube embed, etc.
First, let's prepare the dynamic iFrame shortcode
We will be created a custom shortcode that will dynamicly generate the proper iFrame URL.
You will need either Code Snippets, WPCodeBox, or just your child theme functions.php.
Don't add the code in Elementor Custom Code feature, it won't work.
Create a new PHP code snippet, and add the following in it:
<script> /* Please login to get the code * The code will be for the Easy Elementor Dynamic iFrame (YouTube, Vimeo, Calendars, etc) tutorial * Found at this URL https://element.how/elementor-dynamic-iframe/ */ </script>
After adding the code, click Save & Activate.
After, add a new ACF custom field where you will set the unique value of your Elementor dynamic iFrame
You don't need to use ACF for this, but it is the most popular option. You could also use JetEngine, Pods, or simply the native WordPress custom fields.
I won't go into details here on how to set this up as it varies slightly depending on what method you are using. Google "ACF add custom field to posts (or to a specific custom post type)" or the likes.
Editing the dynamic iFrame code
There are three parts that you will need to edit to match your project.
Edit this part to enter your proper custom field slug name. Keep the single quotes.
$default_custom_field_name = 'iframe_id';
And edit these parts, should be clear enough what's required (see the example below for more clarity if needed):
// 'Before' HTML part. Edit this part to customize the beginning of the output
// 'After' HTML part. Edit this part to customize the end of the output
The way it work is that the return value of the custom field will be placed in between the 'before' and 'after' part, to construct the full URL.
Now, add the Shortcode element to your template where you want the dynamic iFrame
In your single post template (most likely) or maybe in your loop template, add the Shortcode element.
Add this in your shortcode element content:
<script> /* Please login to get the code * The code will be for the Easy Elementor Dynamic iFrame (YouTube, Vimeo, Calendars, etc) tutorial * Found at this URL https://element.how/elementor-dynamic-iframe/ */ </script>
Everything should now work! Keep reading for more information.
Example of setting the 'before' and 'after' HTML
For this example we are going to setup a dynamic Vimeo iframe.
The $before_html variable will need to be the first part of your dynamic iFrame link. In this example, the full iFrame link to a Vimeo is this:
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/81400335?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Test Title of Video"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
So the first part is:
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/
This is what the value of the $before_html should be. Should then look like this:
$before_html = ' <div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/';
Then we have the dynamic part, the video ID:
81400335
It will be queried dynamically from the code.
Finally, we have the last part:
?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Test Title of Video"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
This is what the $after_html should have has value. Then it would look like this:
$after_html = '?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Test Title of Video"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>';
Whatever your actual iFrame link is, the principle will be the same. Split it in three parts around the part that needs to be dynamic, set part 1 and 3 as before and after.
Important: Be careful with the syntax. The single quotes need to be at the very start and end of the value, and at the end there also needs to have a semi-colon.
If your value has in it single quotes already, you will need to escape them by adding a \ (backward slash) just before them. Google 'escaping PHP string variables' for more info.
Finally, enjoy your Elementor dynamic iFrame!
I hope you have enjoyed this tutorial!
Cheers!
16 Responses
Hi Maxime,
Thanks for another great tutorial. I tried following along but somehow can't get it to work. I'm trying to dynamically embed a vimeo iframe. I created a custom field (tried it with ACF and Pods) for the vimeo video ID and added a HTML widget on to a single post template but after adding the corresponding parts of the vimeo iframe link to the before and after input fields, the iframe will not be rendered on my website.
I'm getting the following html output:
For some reason the tag doesn't get rendered as html but as text instead. The surrounding gets rendered as html though.
Do you have any idea what could be the problem?
Thanks in advance!
Sadly my html code got removed from my previous comment. I just wanted to say, that the html output in my source code looks correct (according to your tutorial) but on the rendered website the iframe html tag somehow doesnt get rendered as html, the surround div html tag does.
Hey Florian! Please share your URL with me if it's possible, I will check...
Hi Maxime, thanks for the quick reply!
I set up a quick site where I tried adding a vimeo iframe to a loop grid, you can find it here:
https://projekte.florian-weinhappl.at/davidhoeller/dynamic-iframe-test/
You should notice that the iframe html tag gets rendered as regular text. The same thing happens on a single post template. I'm using the regular ACF text field for adding the ID in the custom post type in this example.
Hey Florian!
I updated the tutorial with a completely new technique to get this working. Try it out and let me know if it works for you!
Cheers!
Hi Maxime,
Thank you very much, that worked out great!
Hi Maxime,
I hope you are keeping well. I asked in the Global Elementor Community about the HTML widget. I have a CPT (in JetEngine) which will have a meta field for HTML.
Each CPT post will have different code associated with it (linking to a Shopify store for t-shirt designs) without the user being sent to the store. Instead, the HTML creates a pop-up within the site.
I tried adding the Elementor HTML widget in the CPT single post template and setting the Dynamic aspect to see the field containing the HTML (I set the field as text. I also tried textarea and WYSIWYG), but this is not working.
Within the HTML code provided to me, there is only one URL (https://sdks.shopifycdn.com/buy-button/latest/buy-button-storefront.min.js), so I do not know what to use in the 'Before HTML' part in your tutorial above.
Any help would be greatly appreciated. Thank you.
Rip
Greetings!
Set both of the before and after like this, if you don't really need them:
$before_html = '';
$after_html = '';
And set your ACF field as textarea.
Let me know how it goes!
Thank you for the superfast reply Maxime. Most appreciated. I shall give this a try and let you know. Thanks again.
Awesome, with your help, this has worked perfectly. Thank you so much Maxime. I really appreciate your time and assistance.
Hi, thanks for this code. Should I also update the line below?
'field' => $default_custom_field_name
to reflect the field name?
Thanks
Greetings Real,
No need as we already take care of this on this line:
Cheers!
I have followed the entire process above,
but why is the code not processed, and what appears is still plain text?
Greetings Swan,
I'm not certain. Is your Code Snippet activated? Is the shortcode rendering at all or you see the shortcode text itself? Do you have a link to your page?
Very Impressive. Worked like a charm.
Awesome, glad it worked well for you!
Cheers!