Alamo Colleges District

Embedding Content

Updated on

Canvas logo with red circle and red Canvas lettering

Note: Some browsers such as Firefox and Chrome create security restrictions for displaying non-secure content within a secure window, such as Canvas.  If you visit a page in your Canvas course with an embedded iFrame that is linked to non-secure content, you may see a shield icon in the browser address bar at the top. You can choose to override the security restriction and display the content by clicking the shield icon and then choosing Disable Protection on This Page or Load unsafe script.

1. Within a Canvas course, click on Pages in the course navigation.  You can create a new page or modify an existing page.  In the rich content editor, click on the HTML Editor link. 

click on HTML Editor in the rich content editor

2. Copy and paste the following code into the HTML content editor -

<p><iframe style="overflow: hidden;" src="" width="700" height="300"></iframe></p>

src= points to the web page that you want to show within your iFrame window.  Replace the URL in bold with the link to your desired guide. Below is an example of the final code in the HTML editor.

Rich content editor screens with sample code

3.  If you are ready to publish your page, click the Save & Publish button.  If you want to create a draft of your page, select Save.

Cancel, save and publish, and save buttons

Congratulations on embedding a web page within Canvas!  Happy embedding!

(sample page below)

Embedded ScreenSteps guide within Canvas page


Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Previous Article Creating Tabs in Canvas
Next Article Course Feature Options
Still Need Help? Contact Us