Skip to content

Instantly share code, notes, and snippets.

@wayferer
Created February 19, 2014 16:41
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 wayferer/9095895 to your computer and use it in GitHub Desktop.
Save wayferer/9095895 to your computer and use it in GitHub Desktop.
fluid iframe (used for youtube vids)
.fluidVidContainer{width:100%;position:relative;margin-bottom:20px}
.fluidVidContainer:before{
display:block;content:'';
padding-top:56.25%;/*16x9*/
padding-top:75%;/*4x3*/
padding-top:200%;/*1x2*/
padding-top:50%;/*2x1*/
padding-top:100%;/*1x1*/
}
.fluidVidContainer iframe{position:absolute;top:0;left:0;width:100%;height:100%}
<iframe width="302" height="315" src="//www.youtube.com/embed/ScMzIvxBSi4" frameborder="0" allowfullscreen></iframe>
//requires helpers.js
if(zQ('iframe')){
for(i=0;i<zQA('iframe').length;i++){
var tag=zQA('iframe')[i];
var container=document.createElement('div');
zAddClass(container,'fluidVidContainer');
if(!zHasClass(tag.parentNode,'fluidVidContainer')){
wrap(tag,container);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment