Easy Elementor Dynamic iFrame (YouTube, Vimeo, Calendars, etc)
Get Premium

Easy Elementor Dynamic iFrame (YouTube, Vimeo, Calendars, etc)

Element.How also offers premium tutorials! Check them here:

Easy Elementor Dynamic iFrame (YouTube, Vimeo, Calendars, etc)

Table of Contents

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&amp;autopause=0&amp;player_id=0&amp;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&amp;autopause=0&amp;player_id=0&amp;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&amp;autopause=0&amp;player_id=0&amp;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!

Easy Elementor Dynamic iFrame (YouTube, Vimeo, Calendars, etc)

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2927 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

16 Responses

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

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

      1. Hey Florian! Please share your URL with me if it's possible, I will check...

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

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

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

      1. Thank you for the superfast reply Maxime. Most appreciated. I shall give this a try and let you know. Thanks again.

  5. Hi, thanks for this code. Should I also update the line below?

    'field' => $default_custom_field_name

    to reflect the field name?

    Thanks

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

Leave a Reply