Adding embedded videos in Pressbooks

Why do we need to enhance embedded videos?

  • Videos are viewable in browser only​
  • Screenreaders don’t access videos visually
  • Print/PDF/Offline users can’t access videos​

… with a little planning & some HTML code, we can improve the user experience in each of these situations!

Video Demonstration

Watch Embedded videos in Pressbooks on Screencast-o-matic (6 min)

Video source:Embedding videos in Pressbooks” by Jen Booth is licensed under CC BY-NC, except where otherwise noted.

Process to add embedded videos in Pressbooks

Steps, timestamp in video explanation, Pressbooks editor required and related code snippet/sample
Step
Description Time stamp Editor Code snippet/Sample to Insert
1 Create an introductory statement & link to the video 1:40 Visual Watch Introduction to Pressbooks (3 mins) on YouTube​

  • see notes below for Watch Statement format

 

2 Tag the link as external 2:15 Text <a class=”external” href=”https://youtu.be/Lqqsp8soXTo”>
3 Embed the video 2:44 Visual https://youtu.be/Lqqsp8soXTo
4 Add a reference/attribution 2:58 Visual *Video source: Pressbooks. (2015, July 8). Introduction to using Pressbooks [Video]. YouTube. https://youtu.be/Lqqsp8soXTo
5 Tag the video & reference using div class to remove from the PDF export 3:46 Text <div class=”video”>…. </div>
View screenshot of complete code
6 Save & preview in your browser  5:10 Browser

Box Header

If placing the video within a textbox, make sure to use a unique box header if there will be more than one video on the page. This allows screenreaders to navigate more effectively through the page.

Watch Statement

This statement precedes the video. It’s read by a screenreader before it gets to the embedded video and gives a chance to view the video on YouTube. It’s also used in the PDF export of the book, and includes an external link typed out for offline users.

  • Add the link so that the whole phrase “Watch…. on YouTube” is part of the link so screenreaders read out that a video is being introduced, how long it is, and where they will go if they click on the link
  • Use shortened YouTube URL format (Click the Share button on YouTube page or put into this format & test): https://youtu.be/Lqqsp8soXTo
  • Round minutes to nearest full minute
  • include “on YouTube” (or whatever source site)

Use Search & Replace to change the YouTube links throughout the book to the shortened version

Find and replace any YouTube links to the shortened format. Go to Tools > Search & Replace

  • Search for: https://www.youtube.com/watch?v=
  • Replace with: https://youtu.be/
  • This should maintain the specific identifier that is unique to each video
  • Click the Preview Replacements*
    • Spot check several of the anticipated replacements – copy and paste the YouTube links shown to make sure they open properly.
    • Once you’re confident you have the search parameters correct, you can Replace & Save

*Note: double check carefully to make sure you’re not introducing errors into the book.

Video Source in APA Format

This statement is removed in the PDF version. It serves to mark the embedded video and credit the original creators, making it stand out from the rest of the book. This works in conjunction with the “Except where otherwise noted” statement in the page level attribution.

Sample statement

Video source: Pressbooks. (2015, July 8). Introduction to using Pressbooks [Video]. YouTube. https://youtu.be/Lqqsp8soXTo

Details to include

  • Name of the channel
  • Full date (Click Show More in the video description to reveal full date)
  • Video title is in italics, convert to sentence case (only first word and proper nouns capitalized)
  • Video URL should be the shortened URL

If strict APA format is not essential to the nature of the book (Eg. COMM), we can ask faculty if they’d like to use the modified (accessible web link) version of APA format. In this case, use the title of the video to create a link to the video, and remove the typed out URL from the end of the reference.

The Finished Product

Watch Introduction to using Pressbooks (3 mins) on YouTube

Video source: Pressbooks. (2015, July 8). Introduction to using Pressbooks [Video]. YouTube. https://youtu.be/Lqqsp8soXTo

Troubleshooting

Video doesn’t display when you copy in the URL

  • Delete the URL and try re-pasting it
  • Try using the embed shortcode [*embed]video url[/embed*] (Remove the asterisks)

Resources

Attribution & References

Except where otherwise noted, “Adding embedded videos in Pressbooks” by Jen Booth is licensed under CC BY-NC 4.0

License

Share This Book