Skip to content

Instantly share code, notes, and snippets.

@psteinweber

psteinweber/iframe.html

Created June 13, 2018 07:21
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save psteinweber/247603dba2aef9e9106f5941d1816c11 to your computer and use it in GitHub Desktop.
Save psteinweber/247603dba2aef9e9106f5941d1816c11 to your computer and use it in GitHub Desktop.
Download ZIP
Embed Responsively
Raw
iframe.html
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='http://alistapart.com/article/responsive-web-design/' style='border:0'></iframe></div>
Raw
vimeo.html
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
Raw
youtube.html
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/QILiHiTD3uc' frameborder='0' allowfullscreen></iframe></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment