Instructional Design

Pro Instructional Design Tip: Use Embedded Media

By Zachary Fruhling

Anyone old enough to remember the mid-1990s internet browsing experience will remember largely text-based web pages with some number of hyperlinks to other web pages. As I have described in a previous article, Rediscovering the Power of the Link, the ability to hyperlink to other pages has an almost magical quality, opening up a world of knowledge at the click of a mouse or the touch of a finger.

Despite this magical and often-overlooked quality of hyperlinks, one of the distinguishing characteristics of the contemporary internet browsing experience is the presence of embedded media, such as videos and animations, alongside more traditional text and hyperlinks. As an instructional designer, one of the simplest things you can do to give your online course materials a contemporary appearance (as opposed to something that looks like it was designed in the mid-1990s), is to embed videos, animations, and images right inside your content pages instead of using only hyperlinks.

Not only does embedding media give your content a more contemporary appearance, but the content is also simpler to use and more streamlined, allowing the user to play videos and animations in context instead of navigating elsewhere to view those media assets. Think, for example, of how handy it is to be able to play the following (adorable) video of a dreaming hamster right inside this article instead of navigating to a different page to view it:

There is, however, a trade-off to using embedded media, which is that embedded media assets may not be recognized by screen readers for accessibility purposes. For this reason it’s usually wise to include a descriptive text hyperlink to the location of the embedded media asset (such as this link to an adorable video of a dreaming hamster) in addition to the embedded media item itself.

The methods for embedding media vary by the location of the external media asset you wish to embed. But as an example, if you wanted to embed the YouTube video above into your online course materials, you would just need to navigate to the YouTube page for the video, choose “Share,” and then “Embed.” This will give you access to the embed code for the video that you would need to paste into the HTML for your online course materials. The embed code that I used to embed this video within this article is shown here for reference:

Sample YouTube Embed Code
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/6wd3ruxgr8A?rel=0″ frameborder=”0″ allow=”autoplay; encrypted-media” allowfullscreen></iframe>

Note that some Learning Management Systems and content delivery platforms have their own methods for embedding YouTube videos or other media assets into your online course materials. For example, the Mashups feature of the Blackboard Learning Management System allows you to search for YouTube videos right inside Blackboard and embed a selected video within your content items without having to manually add the video’s embed code, a handy feature.

Embedding the media assets within your online course materials can take a bit of forethought and effort. The end result, however, will be more inline with the contemporary internet user experience while also increasing the usability for the average user who is then able to view the embedded media assets in context instead of navigating to a different location. Using embedded media assets is a simple design technique, but taking the time to use embedded media assets can distinguish your content as intentionally designed instead of having been thrown together haphazardly.


Zachary Fruhling is an instructional designer, online educational content author and developer, educational technologist, philosophy instructor, poet, and podcaster with nearly 20 years of experience in higher education and educational content development. See Zachary's website at www.zacharyfruhling.com.

    You may also like to read

    Tags: , , , , , , , , , ,