68 Embedded Media & Interactive Content

What is Embedded Media and Interactive Content?

Embedded content refers to content that is hosted outside of your Pressbooks book, but that you ‘embed’ so it can been viewed and interacted with within the webbook, saving your reader from needing to visit another site. 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 – and it follows that you may want to add it to your Pressbooks webbook as well.

Supported Content

Pressbooks supports several different kinds of media and interactive content. Each of these can behave in slightly different ways and have different input methods. When it comes to embedded content, it is important to understand why some content is allowed and other content is not.

One kind of embedded content we restrict is iframes. By default, WordPress (on which Pressbooks is built) limits the use of iframes for server security. In the Pressbooks system, iframes are automatically converted into an oEmbed format.

In Pressbooks, you can in most cases avoid using iframes altogether. Content from approved sites can be embedded without them – all you need is the URL and the system handles the rest!

We make a few exceptions specifically for educational websites that don’t support oEmbed. In this case, we whitelist the website for use with iframes. Read on to learn more about how to embed an iframe or request an addition to the whitelist.

How to Embed Content

There are three ways to embed content:

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

We recommend trying the methods in this order. Read on for details.

First Step: Copy/Paste your URL into the Visual Editor

  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, and be visible in supported outputs as soon as you click Save. If it isn’t, move on to step two.

Second Step: Use the Embed Shortcode

  1. Copy the URL or file name of the media
  2. Add the embed shortcode in the visual or text editor and paste in your file so that the shortcode wraps around it
  3. Click Save
Example: [em​bed height="100" width="100"]URL_of_the_video[/em​bed]

This method also allows you to specify the height and width of your media embed. For more information on how to use the embed shortcode, check out https://codex.wordpress.org/Embed_Shortcode

Third Step: Copy/Paste the <iframe> Embed Code into the Text Editor

  1. Copy the <iframe> embed code of the video, audio, or other media – this is usually available in the sharing options of the media on its source website
  2. Paste the iframe code into the Text editor
  3. Click Save

If the source is whitelisted on Pressbooks, the video should then appear in your visual editor and all supported outputs. Whitelisted iframe sources on Pressbooks include Google Forms, Google Maps, and other vetted sources that have an educational use case

Fourth Step: Contact Your Network Manager

Media still not loading in your book? It’s likely that it’s from a source that has not yet been whitelisted on your network. You can contact your PressbooksEDU network manager to request that the media source is evaluated for your network’s Iframe Whitelist.

Whitelisted iframes can be added by any user on a network. Pressbooks automatically whitelists any source already accepted by WordPress. This includes the following major providers:

  • YouTube
  • Vimeo
  • SoundCloud
  • Social media (Twitter, Instagram, Facebook etc.)
  • Flickr
  • TED.com

Visit https://codex.wordpress.org/Embeds for a full list of WordPress-approved content providers.

Pressbooks also support several EDU-specific platforms, including:

If your media source is not included in either of the above sections and does not support oEmbed, it will likely need to be added to the Iframe Whitelist before you can embed the content in your books. As an alternative, you can always link readers to content on an other website.

H5P Interactive Content (PressbooksEDU Hosted Networks Only)

H5P is not currently available on Pressbooks.com. If you are on a Pressbooks network that does offer H5P, you can find documentation here.

Display Across Formats

While interactive and embedded content is handled natively in web, it is not supported quite so easily across the other formats Pressbooks produces, including PDF and ebook. As a result, we have implemented a fallback method for content that isn’t supported across the board.

This fallback consists of an inserted message that is populated with information available in the system (may include a title, thumbnail, the kind of media, etc.) and provides the reader with a link to the webbook version of the chapter so they can view the missing element (print readers will see a short URL that they can type into a browser). See a couple of examples below.

Uploaded Media

Pressbooks also enables users to upload audio and video directly to their books. Typically, we discourage people from uploading video as the file sizes tend to be quite large and can eat up your storage space quickly. However, if ever audio or video is uploaded and inserted into a book, it will be handled in the same way as embedded media: displayed normally in web and swapped for a missing element message in other formats.

 

NOTE: Please avoid linking to your Pressbooks media files from outside of the Pressbooks platform.

Prefer to watch and learn? Check out this video tutorial: 

 

License

Icon for the Creative Commons Attribution 4.0 International License

Pressbooks User Guide by Book Oven Inc. (Pressbooks.com) is licensed under a Creative Commons Attribution 4.0 International License, except where otherwise noted.