What? An embed permits the display of third party content on your website. This way the content, a post, a tweet is integrated seamlessly. Several embed types are supported without the need for a plugin.

How? Simply copy paste the url into a paragraph block. WordPress does the rest. OR toggle the blue + button in the top left hand corner to get a list of blocks or search for embed.

These embeds are codeless, should adapt to all devices and generally “just work”!

Show me: E.g. we paste the following url from Issuu.com into a new paragraph:

https://issuu.com/studiesebook/docs/studies_summer-high_res_version_05.02.21

This works for major content providers. Not all providers have a supported protocol in place. Many map providers are not supported (felt.com is partially supported though), neither do newsletter providers and external forms software providers and shared documents. But you’ll have heard that you can simply embed using some code wrapped up in an iframe.

IFRAMES

Iframes use the same technology as embeds, so technically not an alternative, but a less safe but more flexible way to embed any kind of content.

In our multisite setup when you try and embed an iframe (inside an html block) it is stripped out on saving on security grounds. Today greater caution is needed when using iframes as modern browsers will object to content drawn from multiple websites – mainly to keep users safe from bad actors. Another issue is that iframes introduce usability issues (e.g. scrollbars inside the page and other annoyances).

A good security example, is to try and embed an unsecure website, i.e. one lacking an ssl security certificate. You will get an error from every modern and up to date browser.

Importantly, not all content can be embedded nor should it be.

If your content provider offers a url based embed, you should always use that without the iframe.

If not, consider whether it is better to simply redirect via a link to the provider’s specific website page or to recreate the content as a static image, with a link.

It is always considered bad form to embed a whole website, menus and footers. A video link is designed to be embedded. Few websites can be embedded whole without it being confusing to navigate. Picture another’s website inside your own, with 2 competing menu systems and 2 scroll bars!

Not uncommon, some services like Airtable and Google may require you to login, as in the example below.

If you must use an iframe, please ask for the iframe tool to be activated, which allow you to quickly adapt the code safely.

The iframe shortcode is easy to deploy. The above was created from the original iframe, but using a short code simplifies things:

The original iframe:

<iframe class="airtable-embed" src="https://airtable.com/embed/appnyG779Gis1Atn9/pagOZOG1aBZBVBBUZ/form" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>

simply speaking you remove the content between and including the <> marks. You then wrap the remaining code in [ iframe … code here … ]

The short code:

[iframe class="airtable-embed" src="https://airtable.com/embed/appnyG779Gis1Atn9/pagOZOG1aBZBVBBUZ/form" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"]

The square brackets tell WordPress to expect an iframe code along with any additional instructions as parameters, to control the look and feel.

With care you can also adapt the code, e.g. to remove scrolling and to stretch the height parameter.