Embeds

An embed permits the display of third party content on your website, suitably presented to integrate more or less seamlessly.

Several embed types are supported natively by WordPress, without a plugin. Without a plugin all the complicated settings are disposed with and one simply copy pastes the url into a paragraph block.

This works for a great many of the most popular content platforms.

Toggle the blue + button in the top left hand corner to get a list of blocks. Scroll down or type emb.. to see the range of embeds available.

The supported embeds are codeless; should display responsively on all devices and the should “just work”!

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

and magically WordPress wraps the content into a frame.

However this method only works for the major content providers and if theirs a WP oembed protocol in place. In practice an oembed pasted url translates the content to be embedded into an iframe window on the third party content.

What about IFRAMES?

Iframes are the main alternative, but should be used with greater caution, as a modern browser like Firefox may prevent the content from displaying at all if it thinks it represents a security risk.

If you try and embed an unsecure website, i.e. one that lacks ssl security, you will get an error warning. Not all content can be embedded nor should it be.

If your content provider offers an embed code you should always use that. If not it is better to redirect via a link to the provider’s specific website page.

It is considered bad form to embed a whole website. While specific content, like a video page has been designed to be embedded, there are relatively few websites that could 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!

The owner of the site you are embedding, e.g. a bank may also have a view! But not uncommonly, services like Airtable may require you to login, as in the example below.

For safety reasons WordPress in a networked (multiuser and multisite) environment automatically removes iframe content and scripts ie short pieces of code that call another piece of code. Don’t agonise over it, get in touch. To use iframes, please ask for the iframe tool to be activated, which allow you to quickly adpat 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 with additional instructions or 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.