Created
June 7, 2013 09:41
-
-
Save samediamba/5728190 to your computer and use it in GitHub Desktop.
What I recently used to make responsive Iframes for my Google docs embed. This happened as I was doing the UEAB site.
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
| /* RESPONSIVE IFRAME GIST | |
| --------------------- | |
| Useful Links: | |
| Responsive Embeds: http://amobil.se/2011/11/responsive-embeds/ | |
| Creating Intrinsic Ratios for Video: http://alistapart.com/article/creating-intrinsic-ratios-for-video */ | |
| /* STEP 1: Grab the Embed. Go to https://docs.google.com/viewer and paste in URL to the document. looks like below:*/ | |
| <iframe src="http://docs.google.com/viewer?url=ueab.ac.ke%2Fdownloads%2Ffinal-bulletin-2013.pdf&embedded=true" width="600" height="780" style="border: none;"></iframe> | |
| /* STEP 2: Customize. Replace the width and height attributes. Use max width and a height u r comfortable with. See the difference now */ | |
| <iframe style="border: none;" src="http://docs.google.com/viewer?url=ueab.ac.ke%2Fdownloads%2Ffinal-bulletin-2013.pdf&embedded=true" width="100%" height="400px"></iframe> | |
| /* Place in an appropriate place in your document. And that's all ;-) */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Anyone knows of a wordpress plugin that makes embeds repsonsive. Will be grateful to know it exists...