Responsive Video

A responsive Video example for Learn Article.

by Stéphane Cabaret

HTML

<figure class="video">
	<div class="video-player">
		<iframe src="//player.vimeo.com/video/39394380?color=f0a400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
	</div>
	<figcaption><a href="http://leihu.com">James Mathias</a> &mdash; Made By Few</figcaption>
</figure>

SCSS

.video-player{
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%; /* 16/9 ratio */
	padding-top: 30px; /* IE6 workaround */
	position: relative;

		// set dimensions and position of elements inside .video-player
		embed, iframe, img, object, video{
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
		}
}