Skip to content

Instantly share code, notes, and snippets.

@samediamba
Created June 7, 2013 09:41
Show Gist options
  • Save samediamba/5728190 to your computer and use it in GitHub Desktop.
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.
/* 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&amp;embedded=true" width="100%" height="400px"></iframe>
/* Place in an appropriate place in your document. And that's all ;-) */
@samediamba
Copy link
Author

Anyone knows of a wordpress plugin that makes embeds repsonsive. Will be grateful to know it exists...

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