What is Embedded Media and Interactive Content?

Embedded media is media that is hosted outside of Pressbooks and linked to through your webbook. You will have encountered this kind of content all over the web – YouTube videos in blog posts, for example, or social media posts in news articles. This same kind of media can be dropped into the editor of your webbook on Pressbooks. Your readers can watch videos, take quizzes, view interactive maps, and more without ever leaving the book.

Supported Content

Pressbooks supports a wide variety of media and interactive content. However, some content is prohibited for the safety of readers and content creators.

One type of embedded content we restrict is iframes. WordPress, the software Pressbooks is built on, blocks the creation of iframes for most users. If you attempt to embed an iframe into the Pressbooks editor, it will automatically be converted into oEmbed format instead – a safer standard for media embedding that limits the possibility of malicious use. If the media host isn’t compatible with oEmbed, your iframe may be stripped entirely.

The good news is that a lot of media sources already support oEmbed, which means that all you need to do is paste the link from the media source into your editor and the content will appear. This is true of YouTube, Vimeo, Facebook, Flickr, and a long list of other sources.

You can also visit https://codex.wordpress.org/Embeds for a full list of WordPress-approved content providers.

There are also some exceptional cases in which Pressbooks will allow iframes. We’ve evaluated a curated set of websites that don’t support oEmbed and globally permitted iframes from certain domains to be embedded across all networks. It is possible to embed an iframe from any of the following sources on our Global Iframe allowlist:

• PhET Interactive Simulations
• knight lab Timeline
• Brightcove
• Google Forms
• Google Maps

If you are accessing Pressbooks from an open source network or from a hosted PressbooksEDU network, your network administrators may have also allowlisted other media sources in addition to those listed above. We recommend reaching out to your administrators if you’re unsure about whether your iframe media source has been allowlisted.

How to Embed Content

There are a few different methods to embed media in Pressbooks:

• Copy/paste the URL
• Use a shortcode
• Use the iframe embed code supplied by the content provider

Read on for details about when to use each of these methods.

Copy/Paste the URL into the Visual Editor

The copy/paste method of embedding content is the easiest, and in most cases it’s the method we recommend. Here’s how to do it:

1. Copy the URL of the video, audio, or other media
2. Paste the URL into the Visual editor
3. Click Save 

Your media should automatically appear in the visual editor. After you save the chapter or post, the content will display in the webbook and can be seen by readers if the book is made public. In export formats, a placeholder note with be inserted in place of the omitted content to let readers know a media or interactive element is available to view in the webbook format of their book. They’ll be given a link where they can view the content when they’re next able to access the web.

This method of embedding media will only work for content that’s compatible with oEmbed.

Re-sizing Manually Embedded content

If you want to re-size the content of a manually embedded iFrame, you will have to add those parameters manually to the iFrame tag for the content. To do this, you will need to edit or modify the iFrame embed tag used in Pressbooks. See the example below for a sample video from YouTube:

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/7tqL-9z_fFA" frameborder="0" allowfullscreen></iframe>

The important values here are the width and height values, which will be expressed in pixels. Note that manually providing values in the iFrame tag itself will give the embedded element fixed dimensions, so that it will not resize as browser width changes.

Embed and Media Shortcodes

Pressbooks has built in compatibility with a number of shortcodes that you can use to format your books either within the editor or before you import your work. Two of these shortcodes, Embed and Media, can be used to embed media in your book.

Embed Shortcode

Generally, the embed shortcode is most useful when you’re drafting your content outside of Pressbooks. Using the embed shortcode signals to Pressbooks that there’s an embedded video and not just a regular link in your book. Many content creators use shortcodes to build their content in Microsoft Word or Google Docs and then import to that work to Pressbooks.

1. Start your shortcode with:
   [em​bed]

2. Copy/paste the URL in after
3. End your shortcode with
   [/em​bed]
4. Save your changes

Media Shortcode

The media shortcode has the same benefits as the embed shortcode when it comes to importing content from other platforms like Microsoft Word. Is also has an additional benefit: you can add a caption which appears below the embedded media element. Here’s how:

1. Start your shortcode:
   [media src= 
2. Paste in your video URL wrapped in quotations:
   [media src="https://www.youtube.com/watch?v=Lqqsp8soXTo" 
3. Add your caption to the shortcode:
   [media src="https://www.youtube.com/watch?v=Lqqsp8soXTo" caption="Your caption text goes here"
4. End the shortcode:
   [media src="https://www.youtube.com/watch?v=Lqqsp8soXTo" caption="Your caption text goes here" /]

For more information on using shortcodes in Pressbooks, check out the Shortcodes chapter of this guide.