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.
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://wordpress.org/support/article/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:
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:
- 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.
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.
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:
- Copy/paste the URL in after
- End your shortcode with
- Save your changes
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:
- Paste in your video URL wrapped in quotations:
- 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.
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 allowlisted 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 comes from a permitted domain, the video should then appear in your visual editor and all supported outputs. See above for a list of which iframe sources have been globally allowlisted 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 allowlisted on your network. You can contact your PressbooksEDU network manager to request that the media source is evaluated for your network’s Iframe Allowlist.
Your network manager may decide to allowlist 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:
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.
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.
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: