Embedding iframes in a content page: blank

[laura2]

I've been trying to add web pages within a Canvas content page and have never been able to make it work. I only see a blank white page. 

Here is the code I am using: 

<iframe src="https://www.khanacademy.org/humanities/us-history/civil-war-era/sectional-tension-1850s/a/the-slave-..." width="100%" height="700"></iframe>

I've tried http and https. I've tried other URLs (besides Khan). I've tried experimenting with the height and width fields. I've tested it in Chrome and Firefox. I've never seen anything but a blank white page. 

[bneporadny]

Hey  @laura2 ‌,

At this time Canvas does do what you're looking for it to do. Below are some references on why it doesn't work and some ideas that have been opened about allowing this to work. 

https://community.canvaslms.com/ideas/10144-link-to-external-url" modifiedtitle="true" title="Link t... 

https://community.canvaslms.com/ideas/6692" modifiedtitle="true" title="Enabling Links to Open in Ne... 

The good news is there is a work around for what you're looking to do. While it won't open the link within an #iframe it does allow you to #embed website URL's as a module item.

How do I add an external URL as a module item? 

Hope this helps.

Brian

[Stef_retired]

Hi,  @laura2 , given the specialized subject matter of your question, we've moved it to the Instructional Designers‌ group. If you're not yet a member of that group, you can easily join by clicking on the link to the group and selecting Join Group from the Actions dropdown you'll see at the upper right of the group home page.

And thanks,  @bneporadny ‌, for finding and responding to this question; if you're not yet a member of Instructional Designers, please join! 

[laurakgibbs]

The problem I suspect is that Khan Academy is one of those sites that, as a matter of policy, blocks the use of iFrame. Flickr does this also. So, your iframe code is not working because of a Khan Academy setting, not an iframe problem.

I think the redirect tool is also an example of an iframe application, but I will go check to see what happens... (pause) I got a blank when trying to set up the redirect tool for this site also.

Can I ask why you don't just link to the site? You lose a lot of screenspace when you display a site inside Canvas, but if you just link to the site, then your students can click on the link that opens outside of Canvas and the page will display properly in the way it is designed to be seen (which is perhaps also why Khan Academy is choosing to block the iframe display).

Brian's comment above includes links to pages that can help with sites like this which block the use of redisplay via iframe.

[kendra_jarvis]

Laura, 

Working with K-12 teachers, I know embedding a site, using iframe, inside Canvas in helpful because if students leave Canvas to go to a site, many times we have lost their attention and they go down a rabbit hole on the web. Embedding a site allows students to stay inside Canvas and access the material instead of losing them leaving the LMS.

[laurakgibbs]

I guess I would consider that a teachable moment: instead of trying to just keep them inside, it seems like it would make more sense to use a learning activity that provides the structure they need to keep their focus, whatever that might mean in the context of the learning activity. Inside of Canvas or outside, that tutorial is a lot of reading to do, and I would guess the challenge (one that I wrestle with in my classes) is teaching students about good note-taking strategies to make sure they are getting something of lasting benefit from the reading.

[kendra_jarvis]

Here is some more information:

Can I use Khan Academy’s videos/name/materials/links? – Khan Academy Help Center 

[laurakgibbs]

I'm surprised they don't mention there that disable iframe. But I'm 99% sure they have disabled it since the Redirect Tool also does not appear to work.

[woodwardtw]

If you look in the console (inspect elements>console) you'll see that Khan is blocking it. The following error appears. 

Refused to display 'https://www.khanacademy.org/humanities/us-history/civil-war-era/sectional-tension-1850s/a/the-slave-economy' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

[laura2]

Thanks all. Laura Gibbs, can you give me an example of a publicly-available site that does allow iframe embedding, so I can test it to make sure it's not a problem on my end? I was only using the Khan Academy site as an example, but maybe blocking iframe display is so common that every dummy site I've tried it with has the same issue. 

I do not, at this time, wish to embed my own content (for example, from another blog or site that I write/control). Most of the tutorials I've seen on iframe embedding use self-created, off-Canvas content in their examples, but say it will work the same way "for any web page." That hasn't been my experience. 

As to why I want to do it this way, there are usually three reasons: 

1. Continuity. My students do all the homework and reading at home (flipped classroom for homeschoolers who only meet once a week for one hour per class). They usually have 3-5 main readings or video assignments, which I include as links from a single content page. This comes after 2 or 3 content pages with shorter/easier introductory material. Keeping all of the introductory material inside Canvas is one way I distinguish between the types of reading they need to do, and with it the types of reading strategies they need to employ. I've noticed that class preparation and participation has gone up when the homework is set up in this very methodical way: they go through the modules 1, 2, 3, 4, etc. until they get to the last page which has the "real" assignment with all the external links. 
2. Control. I would love to be able to add text above or below embedded content. If I can't do that, I'll link from a content page and include my own commentary -- either something as simple as "read this article from The New York Times: [link]" or a paragraph or so explaining what I'm linking to, why, and which parts they should pay attention to. I'm willing to keep doing that until the end of my days, but it'd be cool if I could make the modules snazzier by putting the content itself right inside the page. (This is why I don't use the external link tool at all; it's the worst of both worlds. Off-Canvas linking, AND no way to contextualize it.)
3. Pre-empting student laziness. I have a few students who just don't click on links! It's hard enough to get them to log into Canvas every week; asking them to press all these extra buttons sends them into despair, apparently.  I can't even say I'm that different. I don't click on everything I see while scrolling through social media; I need to believe it's going to be worth my time. Putting the content right there in front of them raises the odds that they'll at least skim it. 

I don't teach in a graded environment, so I don't have any sticks to get my students to do the work. Only carrots. Embedding content would make the modules more visually interesting without becoming more confusing in the process.

[laurakgibbs]

Hi  @laura2  ! I iframe my blog into my homepage and here's the code I use for that; here's the class where it appears:

Daily Announcements: MLLL-3043 Myth-Folklore - Spring 2018 

And here's the iframe part:

<p><iframe src="https://ouclassannouncements.blogspot.com/" width="100%" height="1000"></iframe></p>

You should be able to copy and paste that into a Page and see if it works. If it does not work, that would definitely surprise me, and it would mean you should check to see if there has been some kind of disabling on the part of your system administrator.

I don't use grades either, and the way I try to motivate students is by giving them assignments they USE for the next assignment: so, they take notes on their reading because they will use those notes to write a story. They write stories to put in a class project. And because they read each other's class projects, they are motivated by the peer contact. They might not mind turning in something not-so-great to me, but sharing things with your fellow students is different. 🙂

And I definitely believe in visually appealing in Canvas! I've got a whole lot of image randomizers, if those might be of any use to you. Oh, those also use iframe for embeding, so you could test that out too; each of the widgets here in the Widget Warehouse uses an iframe to work in Canvas:

Laura's Widget Warehouse

I hope you figure out your iframe mystery (although Khan Academy is going to resist I think, no matter what it turns out with the others).