[ARCHIVED] Embed a webpage in Canvas

[kevinm_washburn]

I used the iframe instructions found in the search options and it appears to not work with a webpage that I would like to embed into my course.

Here is the URL:

http://library.wichita.edu/empower/module2/choosingYourTopic.htm

WSU EMPOWER: Choosing Your Topic

Any suggestions on how to fix to enable me to have this website resource within Canvas would be great.  I would like for my students to view the webpages from this source within Canvas.

[Stef_retired · Accepted solution]

 @kevinm_washburn , the viewing problem might not be with the code you used to embed the web page, but rather, how browsers treat http: content. After you save the content page using the <iframe> code, check your browser's address bar to see if it's showing an odd icon. Refer to this resource for instructions: External or "insecure" content: Strategies for helping students cope​ . You might find that you have to enable "external content" or "insecure content" in order to view the embedded web page.

• If, after allowing that external content to appear on the page, your web page does display, you then have a couple of choices:

1. Leave the page as it is, and give your students robust instructions on how to enable external content in their respective browsers;
2. Experiment with the code to see if the web site to which you're linking supports the https: protocol. You can do that by simply adding an s to the http: in your HTML to see if the content still displays. If it does, both you and your students should be able to view it without any further clicks or altered settings.

• If the external content icon does not display on the address bar, or if after enabling external content the web page still doesn't display in your content page, please share with us the HTML code you used to embed the websites so we can help you troubleshoot it.

[Stef_retired · Accepted solution]

 @kevinm_washburn , the viewing problem might not be with the code you used to embed the web page, but rather, how browsers treat http: content. After you save the content page using the <iframe> code, check your browser's address bar to see if it's showing an odd icon. Refer to this resource for instructions: External or "insecure" content: Strategies for helping students cope​ . You might find that you have to enable "external content" or "insecure content" in order to view the embedded web page.

• If, after allowing that external content to appear on the page, your web page does display, you then have a couple of choices:

1. Leave the page as it is, and give your students robust instructions on how to enable external content in their respective browsers;
2. Experiment with the code to see if the web site to which you're linking supports the https: protocol. You can do that by simply adding an s to the http: in your HTML to see if the content still displays. If it does, both you and your students should be able to view it without any further clicks or altered settings.

• If the external content icon does not display on the address bar, or if after enabling external content the web page still doesn't display in your content page, please share with us the HTML code you used to embed the websites so we can help you troubleshoot it.

[rkuzmanic]

I  embed this  into the Pages and then tried it.  Message was "webpage" unavailable.  Any ideas?

<iframe src="http://www.npr.org/player/embed/275990685/276847409" width="100%" height="290" frameborder="0" scrolling="no" title="NPR embedded audio player">

[awilliams]

Hey  @rkuzmanic ​,

Check out the document stefaniesanders​ linked to above. You are attempting to embed insecure content inside a secure environment. This won't work without instructing your students on how to configure their browser to allow it. I tried forcing https with that link you gave with no luck so the steps Stefanie outlined are your only option for embedding this content. You could always just provide a link to it though.

[rkuzmanic]

Thanks Stephanie-I added the “s” onto the http and the link worked!

I am still confused on when to embed vs link. So if you could post about the differences, it would be much appreciated.

[Stef_retired]

 @rkuzmanic ​, the decision on whether to embed or link is a matter of how you want the page to appear to your students. If you want the web page to display directly in the page (and if the site to which you're linking supports the https: protocol), you should embed. If you want students to open the link in a separate tab or window (meaning you don't mind if they navigate away from Canvas to view it), you can link out to it, using the target="_blank" attribute to ensure that the URL opens in a new tab or window.

[awilliams]

I can confirm this site doesn't support https so stefaniesanders​ answer is correct.

[FSSimone]

Dear Stef, 

I tried to embed the follwoing page: https://community.canvaslms.com/t5/Canvas-Basics-Guide/What-are-the-browser-and-computer-requirement...

Using this: <p title="Eingebettete Inhalte"><iframe style="overflow: hidden;" src="https://community.canvaslms.com/t5/Canvas-Basics-Guide/What-are-the-browser-and-computer-requirement..." width="1200" height="1600" data-mce-fragment="1"></iframe></p>

Unfortunately it does not work. Do you have any idea? 

I thought it might be a good idea to give the students a chance to see if their browser is up to date for using Canvas. Thanks, Simone

[Chris_Hofer]

Hi @FSSimone ...

Not sure if you saw the reply from @chadscott over on this thread, Re: Embedding a webpage to Canvas? - Instructure Community (canvaslms.com), but he said you need to use this version of the Guides if you want to embed them in your course pages:

https://guides.instructure.com/

Hope this helps...and thanks Chad!

[FSSimone]

Thanks @Chris_Hofer @chadscott 

Unfortunately, in the student guide I can't find a page where there is directly shown that the browser is up-to-date or not. Which means we will have to embed the Admin Tutorial and the student has to read through the text and click the appropriate link. 

So at the moment I can't see a solution instead of using the redirect app with open in Open in New Tab function.

Other ideas are appriciated 🙂 

[jenoch]

I understand the http vs https portion, but there seem to be other reasons why websites will not embed, like ones that require logins, for example. Is there a list of more things to think about then embedding web sites?

For example - is "government websites" a category that won't display in an embed?:
<p><iframe src="https://www.hhs.gov/ash/oah/adolescent-development/index.html" width="100%" height="700"></iframe></p>

doesn't display

<p><iframe src="https://www.usa.gov" width="100%" height="700"></iframe></p>

doesn't display

What other categories are there that we should know about? Categories of https websites that will not embed

I am trying to embed in rather than link out

[kmeeusen]

Hi  @jenoch 

While this specific site will not display because of a security setting in the page, this is not general for government sites. I use state and federal sites all the time, and many HHS sites regularly.

I'm actually trying to figure out why this one is not displaying right now, but am drawing a blank. I am scouring the HHS website policy manual, but have found nothing yet.  However, there is clearly some kind of new security policy in place at HHS.  If I learn anything, I will get back.

Kelley

[chadscott · Accepted solution]

@FSSimone That guide is under the Canvas Basics Guides -

https://guides.instructure.com/m/67952/l/720329-what-are-the-browser-and-computer-requirements-for-i...

Cheers,

Chad Scott

[FSSimone]

You're the one, THANKS