Created
October 20, 2015 15:36
-
-
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/
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
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.
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
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.