css.php

WordPress makes it easy to embed content from many content providers by simply inserting the external URL (its web address) on a separate line in a page or post if you are using the Classic Editor.

If using the Block Editor, click the plus sign to add a new block, select “Embed” and choose the content provider and paste in the URL. See below:

 

Custom Embeds

In some cases, content cannot be embedded this way. Some content providers supply embed codes that use HTML iframe tags which pose a security risk for the Commons. Others suggest using out-of-date plugins.

Listed below are file and content types which require a bit more effort to embed.

PDFs

To embed a PDF, activate the “PDF Embedder” plugin. Go to “Add Media” and add the PDF file to the media library.

In the Block Editor, you will see “PDF Embedder” as a block. Add it and select the PDF from the Media Library.

Microsoft Files and PDFs

Microsoft Files and PDFs can be embedded using the “Embed Any Document” plugin. The documents are stored in the Media library.

In the Classic Editor, you will see a new option in your toolbar. Simply click and select the file you want to embed.

In the Block Editor, you will see a new “Document” block. Click and choose your document.

Google Docs, Sheets, Forms, etc.

Commons Developer Ray Hoh developed a plugin for embedding Google files. Activate the “Google Docs Shortcode” plugin and follow these instructions to create your shortcode.

In the Block Editor, create a shortcode block and paste in the shortcode.

Google Calendars

For Google Calendars, you need to use the plugin ”Simple Calendar.”

You will need to get the ID of your calendar from the shareable url (the ”cid” parameter) that is available from your Google calendar, and put it in the appropriate place in the calendar “add” section. Then you will get a shortcode such as this – [calendar=”1817″]

In the Classic editor, simply paste it in. In the Block editor, create a shortcode block and paste in the shortcode.

See Simple Calendar Documentation for more information.

YouTube

Videos can be easily embedded by just pasting in the URL in the Classic Editor, but you might want to activate the “YouTube” plugin for other cool options.

In the Classic Editor, you will see a new icon in your toolbar. Click it and follow the instructions to configure the shortcode.

In the Block Editor, you will see a block called “YouTube Wizard” in the Embed section after you have installed the plugin. You will also see a “YouTube” embed block which you can use without installing the plugin.

Google Maps

There is a plugin called “Embed Google Maps” – it requires an Embed API Key which can be obtained here. Another, maybe simpler option is to use the “Ultimate Shortcodes” plugin. You will see a “Google Map” option.

Many premium themes have Google Map embed code built in.

In the Block Editor, select the shortcode block and enter the “Ultimate” map shortcode.

Sutori

The Commons Dev team created a handler for Sutori content. In the Classic Editor, simply paste in the URL.

The embed handler is not yet supported in the Block Editor. Please use the Classic editor for now.

Padlet

The Commons Dev team created a shortcode for Padlet content. It requires a Padlet key and optionally, the height. Watch how to find the Padlet key.

The shortcode syntax is:

For the Block Editor, you will need to use a shortcode block. Follow these instructions.

VoiceThread

The Commons Dev team created a handler for VoiceThread. In the Classic Editor, simply paste in the URL.

The embed handler is not yet supported in the Block Editor. Please use the Classic Editor for now.

Prezi

The Commons team created a plugin for Prezi called “PreziWP.” Follow this link for information on how to configure the shortcode.

For the Block Editor, you will need to use a shortcode block.

Piktochart

The Commons Dev team created a handler for Piktochart. In the Classic Editor, simply paste in the URL.

The embed handler is not yet supported in the Block Editor. Please use the Classic Editor for now.

StoryMaps JS

In the Classic editor, just paste the URL on its own line.

In the Block Editor, paste the URL in the “Embed” block:
https://wpcompendium.org/wordpress-gutenberg/blocks/embed-block/

The URL must begin with “https://uploads.knightlab.com/storymapjs/“.

Tableau

In the Classic editor, paste the Tableau share URL on its own line.

In the Block Editor, select the Shortcode block and input the following:

[embed]PASTE TABLEAU SHARE URL HERE[/embed]

To get the Tableau share URL, click on the share icon as seen below:

Flipsnack

The Commons has a custom handler for Flipsnack. In both the block and classic editors, use the following shortcode:

[flipsnack src="https://cdn.flipsnack.com/widget/v2/widget.html?hash=19fb8mprzp"]

Note that the ‘src’ attribute must match the ‘src’ attribute from the iframe code provided by Flipsnack.

Loom

To use, just put a loom.com video URL on its own line in the editor. Accepted URLs must be in one of the following formats:

https://www.loom.com/share/26172371630c41a89a03966d4bbbf6a3
https://www.loom.com/embed/26172371630c41a89a03966d4bbbf6a3

Knowmia

The Commons has a custom handler for Knowmia. In both the block and classic editors, use the following shortcode:

[knowmia key="7j7C" height="582px" width="720px"]

repl.it

The Commons has a custom handler for repl.it. You can simply paste the URL on a new line, or if you want more control over the width, you can use the following shortcode:

[replit url="https://repl.it/@Mr_RR1/Examples#main.py" width="50%" height="600px"] 

Jitsi Meet

Please active the “Webinar and Video Conference with Jitsi Meet” plugin and use the Block editor to add a block on your WordPress page for your Webinar or Video Conference.

Scribd

To embed Scribd content, click on the “< > Embed” icon. A popup will appear. Click on the WordPress radio button and copy the embed code. It will look like this:

[scribd id=329123976 key=key-gOe1cnxUYZbf4IuCgi9S mode=scroll]

If you have the JetPack plugin activated, you can just use this shortcode. Otherwise, make this small (four chararacter) change to the shortcode.

[scribd-doc id=329123976 key=key-gOe1cnxUYZbf4IuCgi9S mode=scroll]

sketchfab

To embed content from sketchfab, please install and activate the JetPack plugin. Once this plugin is installed, simply paste the model URL onto a new line. The URL should look something like this:

https://sketchfab.com/models/221a604282d449978cbcc4b5351bfe18

quizlet

The Commons has a handler for quizlet and there are two ways to embed it content. The simplest way is to type the url on a new line:

https://quizlet.com/264774785/cat-skull-flash-cards/

https://quizlet.com/264774785/test

For greater control, you can also use a shortcode. Pass either the numeric ID or the URL. You can provide from the five ‘type’ values supported by Quizlet embeds: ‘match’, ‘flashcards’ (default), ‘learn’, ‘test’, ‘spell’.

[quizlet url="https://quizlet.com/264774785/cat-skull-flash-cards/" width="400px" height="400px"]

[quizlet id="264774785" type="test"]