Skip to content

Instantly share code, notes, and snippets.

@RyanNutt
Created October 20, 2015 15:36
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save RyanNutt/905983e76c20cf3177b7 to your computer and use it in GitHub Desktop.
Save RyanNutt/905983e76c20cf3177b7 to your computer and use it in GitHub Desktop.
Needed a way to embed a Gist in an Instructure Canvas page. Just paste this into when in HTML editing mode and switch out the address with your gist. CSS came from http://www.bymichaellancaster.com/blog/fluid-iframe-and-images-without-javascript-plugins/
<p style="position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;">
<iframe style="position: absolute; top: 0; height: 100%; width: 100%;" src="https://gist.github.com/RyanNutt/905983e76c20cf3177b7.pibb" width="300" height="150">
</iframe>
</p>
@RyanNutt
Copy link
Author

You can leave the height and width properties - the actual properties, not the part in style - but most rich text editors will add them back in anyway.

At least in Canvas, it looks like the links to the page back at GitHub on the bottom don't work. Clicking them refreshes the main page.

@RyanNutt
Copy link
Author

Okay, so this isn't working quite right. The 56.25% bottom padding is assuming that the iframe is 16:9, which is right for most videos. But the gists can be any height.

@theotherdy
Copy link

Thanks @RyanNutt. For anyone else looking how to do this, I've just blogged about how to use Blair Vanderhoof's gist-embed in Canvas.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment