iFrames

Skip to page content

iFrames

iFrames, or Inline Frames, make it easy to embed external webpages using HTML. iFrames can be useful for adding surveys or YouTube videos.  

WCAG 2.0 Guideline 4.1.2 Links to an external site..

Sources

Overview

When creating iFrames, it is important to add a title tag. This is so that screen readers can properly identify the name and role of the iFrame.

Creating an iFrame with a YouTube Video

The following tutorial will demonstrate how to embed a YouTube video using an iFrame.

    1. Obtain the embedded YouTube video link.
      1. Open up the YouTube video.
      2. Select "Share."Screenshot demonstrating where the share button is and the window that pops up from selecting "share."
      3. Select "Embed."Screenshot demonstrating where the embed button is located from the pop-up menu that appeared from selecting "share."
      4. Copy the embedded video URL.Screenshot demonstrating the screen that will pop-up from selecting embed.
    2. Once you have obtained the embedded YouTube video link, navigate to Canvas and create an HTML text component to add your iFrame to.
    3. Paste the embedded link into the HTML editor. For our example, the code is:
      <iframe width="560" height="315" src="https://www.youtube.com/embed/cLYjKJhUZ0E" frameborder="0" allowfullscreen></iframe>
    4. Add the title tag if it doesn't exist. Use a description that explains the content or function of the iFrame. For example, the code for our YouTube video with a title attribute is:
      <iframe width="560" height="315" src="https://www.youtube.com/embed/cLYjKJhUZ0E" frameborder="0" allowfullscreen title="ADuRoR Advanced Intro 2016"></iframe>
      Once you are done, select OK and save your changes.
    5. The result should place an iFrame in the HTML component. Below is an example of an embedded YouTube video. 

Reading Check

Use the discussion button below to start or view discussions related to this workshop.

Reading Check