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
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
|
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
- Clippings – Firefox Plugin – download/install if desired
- YouTube References – APA
- Accessible URLs – APA
Attribution & References
Except where otherwise noted, “Adding embedded videos in Pressbooks” by Jen Booth is licensed under CC BY-NC 4.0