As I stated in the introduction for this course, "I am not a coder but I know how to find, steal, modify and use existing codes to work in Canvas." The video embed code shown on the previous page is a great example. This same snippet of code can be modified to display any web-based content in an iframe on any Canvas page. Let's learn how............

First, What is an iFrame"

An IFrame (Inline Frame) is an HTML document embedded inside another HTML document on a website. The IFrame HTML element is often used to insert content from another source, such as an advertisement, into a Web page.

That's enough geek-talk

Anatomy of the Video Embed Code

The image below displays the anatomy of the You Tube embed code used on the previous page, or at least as much of the anatomy as we care about.

Let's imagine that we have a website that we want our students to investigate and use as part of an assignment, and we want to display that website on a Canvas page (for example, in the "Instructions" box of an assignment), because we want to add some information and instructions above the web page that we will display. Since I love English teachers, I will add a web page that defines the parts of a sentence. By following the steps below, you will add a fully functional web page into a an iframe on any Canvas page. Below are the steps to do this..........

Steps to Modify an Existing Embed Code

Capture (select and copy) the embed code for any You Tube video, or use the code below. I have again highlighted the text you will need to revise. You may want to first paste the code into a Word document, where you can easily make your revisions.

Replace the yellow highlighted text with the URL of the web page you want to display in the iframe - I'm going to substitute this URL: http://grammar.ccc.commnet.edu/grammar/definitions.htm. After you have done this, the code will now look like the example below,

Because I am displaying a web page, I am going to want the iframe to be as big as practical on the page, so I will make the following revisions to the size (blue highlights):

width="98%". By setting the width to 98%, you are just about filling up the entire width of the Canvas page, and by using a percentage instead of a specific pixel width, your iframe will correctly size in mobile devices.
height="600". a 600 pixels high iframe will completely display display top-to-bottom in the space Canvas makes available for pages on your monitor.

The final embed code will look like this:

Copy your final revision of the code,
Navigate to the page in which you want to embed the new iframe,
Click "Edit", then toggle to the "HTML Editor", and paste your code Where you would like it to appear on your page. Most likely, you will simply scroll to the end of the code that describes everything you typed at the top of that page.
Paste your revised code into the HTML Editor,
Click Save and view the results.

Below you will see the resulting iframe with embedded web page. If necessary, you can fiddle with the height to better suit your needs.

Disclaimer: Canvas is hosted on secure servers, and uses a secured URL type (https://). Unsecured web pages have "http:// in their URL address. In most browsers, this will create a mixed-media security problem and your embedded web page will need to be listed as an exception in the browsers security rules. Sometimes you can fix this by just adding the "s" the the "http" in the URL so that it looks like this: https://. That trick doesn't always work. What I do then is provide a how-to document to my students so that they can easily adjust their browser security settings.