Responsive Video iFrame Embed

Responsive Embedded Video iFrame.md

Responsive Embedded Video

This shows how to embed video from sites like YouTube and Vimeo

For a working example see the following on CodePen: http://codepen.io/profstein/pen/mArLRj

style.css

.videoWrapper {
	position: relative;
	padding-top: 25px;
	height: 0;
}

.videoWrapper.ratio-16-9{
    padding-bottom: 56.25%; /* 16:9 */
}

.videoWrapper.ratio-4-3{
    padding-bottom: 75%; /* 4:3 */
}

.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

video.html

<div class="videoWrapper ratio-16-9">

	<!-- iframe below is Copy & Pasted from YouTube replace with your own -->
	<iframe width="853" height="480" src="http://www.youtube.com/embed/IiJzbXzOdHQ" frameborder="0" allowfullscreen></iframe>
  
</div><!-- end .videoWrapper -->


<div class="videoWrapper ratio-4-3">

	<!-- iframe below is Copy & Pasted from YouTube replace with your own -->
	<iframe width="1280" height="720" src="https://www.youtube.com/embed/tocJ_mKu1GU" frameborder="0" allowfullscreen></iframe>
  
</div><!-- end .videoWrapper -->