Pro Instructional Design Tip: Use Embedded Media

Video Play Button Red

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=”″ 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 a senior instructional designer at HotChalk Inc. where he is responsible for the design and implementation of graduate-level online course materials. Zachary has over 15 years of experience in higher education, both in the classroom as a university-level philosophy instructor and in educational technology as a digital content author, instructional designer, and creator of interactive online course materials and media for a variety of disciplines.

Leave a Reply

Your email address will not be published. Required fields are marked *

Pro Instructional Design Tip: Use Embedded Media

by Zachary Fruhling