Embed Content “Full Size” in Canvas

One of the tricky things about embedding content in Canvas (or, really, anywhere) is that the standard approach is to use an <iframe> markup tag. And an <iframe> needs to be told how big it should be on the screen… and sometimes you don’t know either how big the screen will be or how big what you’re embedding is (or will become).

My best suggestion is to paste the following embed markup code in the HTML Editor view in the Canvas rich content editor (i.e. the mini word processor that you use to edit assignment descriptions, wiki pages, discussion topics, etc.). The following embed code should work more or less universally in place of all other <iframe> embed markup codes. The one below should be the width of your wiki page/assignment/discussion/whatever and strives to be an appropriate height as well.

<div class="container-fluid"><iframe style="min-height: 500px;" src="YOUR_URL_GOES_HERE" width="100%" height="100%"></iframe></div>

So, for example, of you wanted to embed a Google Doc into your content, you might replace the YOUR_URL_GOES_HERE with the link to that Google Doc:

<div class="container-fluid"><iframe style="min-height: 500px;" src="https://docs.google.com/document/d/1_5l_EqO20fE0wrTfQZ0vQ-fGrtiEEXUTxyb2DE7PTV0/pub" width="100%" height="100%"></iframe></div>

Nota bene: there are two ways of linking to a Google Doc, and I have chosen the “published to the web” option, which cannot be edited (rather than the “shareable link” option, which can be edited while embedded).

Mr. Battis has written 88 articles

Educator. Electronics. Esthetics. Easterner (who thinks he's a Westerner).

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">