68 Embedded Media & Interactive Content
This chapter will cover:
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, blacklists all iframes for server security. 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 whitelisted their iframe domain across all networks. It is possible to embed an iframe from any of the following sources on our Global Iframe Whitelist:
If you are accessing Pressbooks from an open source network or from a hosted PressbooksEDU network, your network administrators may have also whitelisted 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 whitelisted.
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:
- Copy the URL of the video, audio, or other media
- Paste the URL into the Visual editor
- 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.
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.
- Start your shortcode with:
[embed]
- Copy/paste the URL in after
- End your shortcode with
[/embed] - Save your changes
Example: [embed]URL_of_the_video[/embed]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:
- Start your shortcode:
[media src= - Paste in your video URL wrapped in quotations:
[media src="https://www.youtube.com/watch?v=Lqqsp8soXTo" - Add your caption to the shortcode:
[media src="https://www.youtube.com/watch?v=Lqqsp8soXTo" caption="Your caption text goes here" - 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.
Iframes
As described above, use of iframes in Pressbooks is restricted for security purposes. However, if you are embedding an iframe from a source that has been whitelisted for your network, you can follow these steps:
- 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
- Paste the iframe code into the Text editor
- Click Save
If the source is whitelisted on Pressbooks, the video should then appear in your visual editor and all supported outputs. See above for a list of which iframe sources have been whitelisted on Pressbooks.
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.
Your network manager may decide to whitelist your media source or not, depending on how safe they judge the source to be.
As an alternative, you can always link readers to content on another website.
H5P Interactive Content*
H5P is a third-party service that allows you to build interactive quizzes and other learning tools into your webbook. The below example is one of more than 40 different content types available in Pressbooks:
https://h5p.org/h5p/embed/440740
You can create your own custom H5P activities from inside your PressbooksEDU network to enrich your open textbook. Find out more in the H5P chapter of this guide.
*H5P creation is not available to authors on Pressbooks.com. If you’re interested in H5P and would like to know more about how your institution can subscribe to PressbooksEDU, please contact our sales team at sales@pressbooks.com.
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 media files, like images, and small audio or even video files directly to their books. We discourage people from uploading video directly to their Pressbooks media library, both because video files are often larger than our maximum file upload sizes, and because it’s difficult to find universal playback support for most video file formats. In the case of videos, embedding from a dedicated video streaming service is almost always a better route to go. 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 the web and replaced with a missing element message in formats which do not support its inclusion.
Prefer to watch and learn? Check out this video tutorial:
