Pedagogy Resources

Your guide to better teaching. 

Table of ContentsGlossary

Embedding: Connecting the Pieces

Consolidate and contextualize your online content. 

What is It?

Embedding is a way of nesting live content from one part of the web into another part. For example, you might embed an editable Google doc syllabus into your course. Students will see your always-up-to-date syllabus in the right place and in context, but your management and editing of the syllabus remains inside of Google Docs. Through embedding, you have brought these two locations into one.

An embed is like a window to another part of the web. Your course in Blackboard is the structure, and the embedded object is what you can see from one of the window frames that you build into that structure. The scenery from that window – an assignment, a video, a slideshow – can change dynamically and separately from the permanent structure around it.

Embedding is recommended because it simplifies management of course content and creates a more seamless experience for students. Learning management systems such as Blackboard are not ideal for hosting and organizing lots of materials and are not suited to serving large files like videos. Let an external service handle these and pop them into your course via embedding.

How Can I Use Embedding in My Course?

Research into online course design shows that students can become easily confused about locations of course content if it is not well organized and clearly presented. A consistent course structure ensures that students know what they are required to do. Quite simply put, students don’t want to go to more than one place to view course content if they don’t have to. And in terms of delivery, choosing the right tool for a certain kind of content is important. Embedding allows you to do to this, for example with video hosted in YouTube or Kaltura. Another example would be an embedded Google Document as shown below.

View or print document from Google Docs

Questions and Considerations

How do I actually embed something?

Just like adding a new window to your house requires some power tools and some know-how, adding an embedded item also takes a bit of handiwork. Websites that allow content to be embedded externally will give you what is called an “embed code.” You need to copy this embed code exactly into the HTML edit view for the content area that you wish you place it in. Sometimes you have to search a bit for the embed code, but most of the examples given above have easy to grab embed codes.

A commonly used type of embed code is called an “iFrame.” Here’s what an iFrame code looks like:

An example of HTML used for embedding video.

What the HTML for embedding YouTube video looks like. See the actual embedded video directly to the right.

The <iframe at the beginning and the /iframe> at the end are what open the window in that page. The width and height items are what determine the dimensions of that window. Finally, the web address that comes after src= is the target content item that will show up through that new window.

What the code at left looks like when embedded:

Helpful How-To Instructions

These links that can help you move beyond these basics and get accurate embed codes for various types of content:

Things to be aware of:

An embed code is only as good as the content it points at. If the service for your embedded item is down, then the embed will not work even if Blackboard is up and running. If you or the content owner or a copyright claimant take down the content, then the embed will not work. If the external service shuts down permanently (this happens!) then the embed will no longer work. Keep track of what content you are embedding to make sure it is current.

Sometimes the size of the window frame you’ve created doesn’t match the content you want to show in it. This is the only part of the code you’ll ever have to touch. Luckily, the change is straightforward. At the beginning of the code, find the width and height items. There is a number after each. These determine how large the window is in pixels. Don’t be afraid to fiddle with these numbers. Instructional designers do it all the time, and sometimes trial and error is the only answer.

Common sizes for embedded items:

  • YouTube video: width=”640″ height=”360″
  • Kaltura video: width=”608″ height=”378″
  • Google Doc syllabus: width=”850″ height=”1100″
  • Soundcloud Audio: width=”700” height=”166”

In Practice

LING 101

Wendy Martelle’s Linguistics 101 course site makes able use of embeds throughout the weekly lessons, including videos and screencasts from YouTube and Google Drive, Google Docs and PDFs, as well as Quizlet flashcard games. (Must be signed in to a UA account to view full site)

Watch: Learning from Experience with Course Technology

Sean Holland

Sean Holland, M.A., has a background in foreign language education and motion graphics and is a Google for Education Certified Trainer.

smholland@alaska.edu

Instructional Designer