Video overlay effect

by Leo Lanese

HTML

<article class="main-wrapper">
    
	<h2>This video has an inner aspect ratio</h2>   
    
	<div class="wrapper"><!-- look here! -->
	    <iframe  src='http://videos.sproutvideo.com/embed/e898d2b5111be3c860/546cd1548010aaeb?type=sd' width='100%' height='100%' frameborder='0'>		    
		</iframe>
	</div>
    
    
	<h2>This one doesn't</h2>
	<iframe 
    src='http://videos.sproutvideo.com/embed/e898d2b5111be3c860/546cd1548010aaeb?type=sd' width='100%' height='100%' frameborder='0'>	    
	</iframe>
   
</article>

<small>videos copyright(s) and hosted from: http://videos.sproutvideo.com</small>

CSS

.wrapper { /* fixing aspect-ratio with inner-aspect-ratio */
	position: relative;
	padding-bottom: 56.2555%;
	height: 0;
}
.wrapper iframe {
    left: 0; top: 0;
}

.main-wrapper {
   max-width: 100%;
   height: auto;
}

* {margin:0;padding:0}

JavaScript

/*

Problem:

If you dynamically load youtube or vimeo, videos, etc we have no idea what their 'aspect-ratio' would be :(

*/



 
/*
 Based on the article from: http://blog.sproutvideo.com/
*/