How to block iframes manually
Use manual iframe blocking if:
- your website loads content from other sites dynamically (in popups or after the page is loaded),
- or if you want to show a specific image placeholder before the iframe loads (e.g. to show a map).
Learn more about iframe blocking.
Before you begin – prepare iframes
Some iframes may have extra code before or after the “iframe” tag and “style” tag inside the “iframe” snippet (see the example below). It will all cause the iframe to display incorrectly. and you must remove it before you continue to use the shortcode or the HTML methods below.
<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>Shortcode method
Step 1. 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]Step 2. Modify the 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 personalization purposes.
- replace the “y” with an address to the privacy policy of the platform that hosts the content.
- replace the “z” with the image placeholder URL.
<iframe src="https://www.dailymotion.com/embed/video/x8ojfze?autoplay=1" [...other data...]> </iframe>HTML Method
Step 1. Change the <iframe to <div class="fupi_iframe_data"
Step 2. Change the /iframe> to /div></div><!--noptimize--><script data-no-optimize="1">FP.manageIframes();</script><!--/noptimize-->
Step 3. 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">
Step 4. Replace X, Y and Z just like in the shortcode method above.
After the changes, your HTML should 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-->