Skip to content

Instantly share code, notes, and snippets.

@r8n5n

r8n5n/responsive_iframe.html

Created January 22, 2016 16:24
Show Gist options
  • Save r8n5n/a83bcc9ff97b9da1b1b9 to your computer and use it in GitHub Desktop.
Save r8n5n/a83bcc9ff97b9da1b1b9 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive iframe
Raw
responsive_iframe.html
<!-- set the max width accordingly -->
<div style="margin: 0 auto; max-width: 960px; position: relative;">
<!-- set the padding % as the aspect ratio of the content e.g. 960/560 = 5.833333 -->
<div style="padding-bottom: 58.33333333%;">
<!-- the width=1; max-width=100% is for iOS -->
<iframe scrolling="no" src="urls/to/iframe.html" style="position: absolute;width: 1px;min-width:100%;height: 100%;"></iframe>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment