Full Picture’s iframe blocking was designed to work with Gutenberg editor. If your site uses a different one then image placeholder may not display as intended and will require a custom coded CSS fix.
To block the iframe simply add a “shortcode” block with [fp_block settings] before your iframe/embed and add another one with [/fp_block] after your iframe/embed.
Like that:
[fp_block settings] Gutenberg block with an iframe / embedded content [/fp_block]
Next, replace the word “settings” from the first shortcode with one or more elements listed below.
Require specific cookies
Add the codes below to require from the stite visitor to agree to specific types of cookies before the iframe is loaded.
stats="1"– indicates that the content requires consent for statistical cookiesmarket="1"– require consent for marketing cookiespers="1"– require consent for personalisation cookies
Show image placeholder until the iframe is loaded
You can display an image placeholder in place of an iframe before it loads. To do this add this code to the first shortcode image="image url".
You can also add a global placeholder (that will be loaded for all iframes) in the plugin settings.
And finally, If you use a global placeholder but you don’t want to use any for a particular iframe you can add image="0".
Please note that if you don’t provide any URL and you wrap shortcode around an embed, then a blank space will be shown on your site where the content should be.
Change aspect ratio
The default aspect ratio of the iframe (and the placeholder) is 16×9! To change it you need to write in the first shortcode width="XXX" and height="YYY".
Load iframes lazily
Add lazy="1" to the first shortcode to load iframes lazily. It will make your site load quicker.
Responsiveness
Full Picture makes all iframes responsive so you don’t need to add responsiveness with your own code.
Final code
In the end everything may look like this [fp_block stats="1" lazy="1" width="1920" height="1080"]...