How the Iframes Manager works and how to set it up

In this post, you will learn:

Let’s start.

What the Iframe Manager does (and why you should care)

Iframes manager shows a placeholder in the place of an external content until visitors agree to cookies OR agree to the privacy policy of the platform that hosts the content).

This is what it looks like.

Example 1. Iframe loads after the visitor agrees to cookies

Example 2. The visitor declines cookies. Iframe loads after the visitor agrees to the privacy policy of youtube.com

If the consent is not required in the country that the visitor is from, the iframe is loaded as usual.

Why should you care?

Think about iframes like about websites that are inside another website. They can track users and use their data. However, they do NOT show cookie notices to them. Unfortunately, this is something you, as a website owner, need to take care of to comply with privacy laws.

And the Iframes Manager is here to help.

Quick-start video guide

How does it work?

Iframes Manager checks the HTML of your webpage just before it is sent to the browser. If it finds any iframe, it modifies it, so that it doesn’t load until the visitor agrees to the privacy policy of your website or the website that hosts the embedded content.

This, however, has a drawback.

Since the Iframes Manager does part of its work on the server, it cannot manage iframes that are created dynamically, in the visitors’ browsers.

This is why the Iframes Manager provides you with 4 different methods of managing iframes. The manual ones let you replace the dynamically created iframes with ones that the Iframes Manager can control.

4 ways to use the Iframes Manager

Iframes Manager can control iframes in 4 ways:

1. Fully automatically
2. Semi-automatically
3. Manually, with shortcodes
4. Manually, with HTML

How to choose one over the other?

The general rule of thumb is this:

How to automatically manage YouTube and Vimeo videos

To use this method, simply choose iframes from what sources you want to manage.

All iframes from selected sources will now follow your cookie notice settings and comply with privacy laws (if your cookie notice settings do too).

Advantages

1. Works on almost all iframes on the website.
2. Image placeholders that show in the place of your iframes will match the content of the iframe. For example, every YouTube video will get a different placeholder image.

Drawbacks

1. This method only works on iframes which are not added dynamically to your website (after the page has been rendered in the browser). In most cases, this means iframes in pop-ups.

How to bulk-manage iframes from other sources

This method works similarly to the fully automatic one above.

However, instead of simply choosing what iframes source to manage, you need to set it up yourself. This way you can manage iframes from all sources and platforms.

Advantages

1. Works on almost all iframes on the website

Disadvantages

1. All iframes from one platform will have the same placeholder image
2. This method only works on iframes which are not added dynamically to your website (after the page has been rendered in the browser). In most cases, this means iframes in pop-ups.

How to set it up

Let’s say you want to manage iframes from Dailymotion.com.

This is how you could set it up.

1. In this field, you place the name of the place where the content is hosted. In our case, it will be dailymotion.com
2. In the second field, you place the domain of the iframe host. You can find it in the src attribute in the iframe code (see below). In most cases, it is the same as the domain you put in the first field.
3. In the third field, you put the address of the privacy policy. Here, I am using one from Dailymotion.
4. In the fourth field, you put the address of the image that you want to use as a placeholder. It will be shown before the iframe loads.
5. And finally, you choose what is the purpose of the visitors data collected by the iframe. In most cases, it is statistics and marketing.

<iframe src="https://www.dailymotion.com/embed/video/x8ojfze?autoplay=1" [...other data...]> </iframe>

How to manage single iframes using shortcodes

If you want only to manage specific iframes, you can do it with shortcodes or HTML method (described in the next section).

Advantages

1. You can manually set the placeholder image for each managed iframe
2. Works in all places where the shortcodes can be used

Drawbacks

1. Doesn’t work in places where shortcodes can’t be used
2. You need to manually put shortcodes around all iframes that you want to manage
3. May require manual modifications to the iframe’s HTML (see last section)

How to use it

Wrap your iframe (or Gutenberg’s media embed block) with these shortcodes.

[fp_block_iframe name="example.com" stats="x" market="x" pers="x" privacy="y" image="z"] <iframe...></iframe>[/fp_block_iframe]

In the first shortcode replace “example.com” with the name of the platform that hosts the iframe.

Replace all the “x” with either 0 or 1 – depending on whether the iframe uses the visitors data for statistics, marketing or personalisation purposes.

Replace the “y” with an address to the privacy policy of the platform that hosts the content.

And finally, replace the “z” with the image placeholder URL.

<iframe src="https://www.dailymotion.com/embed/video/x8ojfze?autoplay=1" [...other data...]> </iframe>

How to manage single iframes with HTML

Last, but not least, we have the HTML method. This can be helpful whenever a shortcode is not supported.

Advantages

1. You can manually set the placeholder image for each managed iframe
2. Works in all places where you can edit the HTML of your iframe

Disadvantages

1. You need to manually modify the HTML of all iframes that you want to manage.

How to use it

This method requires you to edit the HTML of your iframe in the following way.

1. Prepare the HTML of the iframe (I explain it in the next section)
2. Before the iframe put <div class="fupi_blocked_iframe" data-stats="x" data-market="x" data-pers="x" data-privacy="y" data-image="z" data-name="q">
3. Change the <iframe to <div class="fupi_iframe_data"
4. Change the /iframe> to /div></div><!--noptimize--><script data-no-optimize="1">FP.manageIframes();</script><!--/noptimize-->

Example

This is the Dailymotion iframe from above.

<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;"> <iframe style="width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden" frameborder="0" type="text/html" src="https://www.dailymotion.com/embed/video/x8ojfze?autoplay=1" width="100%" height="100%" allowfullscreen title="Dailymotion Video Player" allow="autoplay"> </iframe> </div>

Code in red needs to be removed.

After the changes it will look like this:

<div class="fupi_blocked_iframe" data-stats="1" data-market="1" data-pers="0" data-privacy="https://example.com/privacy-policy" data-image="https://example.com/placeholder-image.jpg" data-name="example.com"><iframe frameborder="0" type="text/html" src="https://www.dailymotion.com/embed/video/x8ojfze?autoplay=1" allowfullscreen title="Dailymotion Video Player" allow="autoplay"> </div></div><!--noptimize--><script data-no-optimize="1">FP.manageIframes();</script><!--/noptimize-->

What to do if an iframe doesn’t display correctly

Some iframes may not display the right way, because of the extra code that is added by WordPress, WordPress plugins or even the platform that provides you with the Iframe’s HTML code.

For example, this is the code of an iframe that you can copy from Dailymotion.

<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;"> <iframe style="width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden" frameborder="0" type="text/html" src="https://www.dailymotion.com/embed/video/x8ojfze?autoplay=1" width="100%" height="100%" allowfullscreen title="Dailymotion Video Player" allow="autoplay"> </iframe> </div>

All elements marked in red, need to be removed, because they break how Iframes Manager displays placeholders and iframes.

How to prevent certain iframes from being managed

To prevent certain iframes from being managed, you need to add HTML comments before and after the iframe. And these are:

1. Starting comment <!-- fp_no_mod_start -->
2. Ending comment <!-- fp_no_mod_end -->

But make sure, that your caching plugin / solution does not remove HTML comments!