69 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.

Fourth Step: Contact Us

Your video still not appearing? It’s likely that it isn’t from a source that Pressbooks has whitelisted yet.

We automatically whitelist any source already accepted by WordPress. This includes the following major providers:

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

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

We also support several EDU-specific platforms, including:

If your content is not supported, you can instead add a regular hyperlink that takes the reader to the content on another site.

Or, you can contact support@pressbooks.com to ask if your media source can be evaluated for our whitelist.

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: 

If you still aren’t sure how to embed media or interactive content, or have other questions, contact us!

License

Icon for the Creative Commons Attribution 4.0 International License

Embedded Media & Interactive Content by Book Oven Inc. (PressBooks.com) is licensed under a Creative Commons Attribution 4.0 International License, except where otherwise noted.