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 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> |
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
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.