benjaminparry · July 22, 2014 21:41
diff --git a/jsbin.nemiho.html b/jsbin.nemiho.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta name="description" content="Ethan Marcotte’s responsive pure-css video embeds" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta charset="utf-8">
  <title>Ethan Marcotte ~ Responsive Day Out ~ Responsive Video In Pure CSS</title>
 </head>
 <body>
  <!-- Video container -->
  <div class="rwd-video-container">
    <!-- Video embed iframe -->
    <iframe class="rwd-video" src="//www.youtube.com/embed/cds7lSHawAw" frameborder="0" allowfullscreen></iframe>
  </div>
  <h1>Ethan Marcotte’s responsive pure-css video embeds</h1>
  <p><a href="http://huffduffer.com/adactio/167841" target="_blank">Listen to Ethan Marcotte speaking at the second Responsive Day Out on Huffduffer</a></p>
 </body>
 </html>
diff --git a/jsbin.nemiho.scss b/jsbin.nemiho.scss
 // Original width and height of video
 $video-width: 560;
 $video-height: 315;

 // Calculate the aspect ratio (height/width)%
 $video-aspect-ratio: percentage($video-height/$video-width);

 // Video container
 .rwd-video-container {
  padding-top: $video-aspect-ratio;
  position: relative;
 }

 // Video embed iframe
 .rwd-video {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
 }
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="Ethan Marcotte’s responsive pure-css video embeds" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta charset="utf-8">
	<title>Ethan Marcotte ~ Responsive Day Out ~ Responsive Video In Pure CSS</title>
	</head>
	<body>
	<!-- Video container -->
	<div class="rwd-video-container">
	<!-- Video embed iframe -->
	<iframe class="rwd-video" src="//www.youtube.com/embed/cds7lSHawAw" frameborder="0" allowfullscreen></iframe>
	</div>
	<h1>Ethan Marcotte’s responsive pure-css video embeds</h1>
	<p><a href="http://huffduffer.com/adactio/167841" target="_blank">Listen to Ethan Marcotte speaking at the second Responsive Day Out on Huffduffer</a></p>
	</body>
	</html>
	// Original width and height of video
	$video-width: 560;
	$video-height: 315;

	// Calculate the aspect ratio (height/width)%
	$video-aspect-ratio: percentage($video-height/$video-width);

	// Video container
	.rwd-video-container {
	padding-top: $video-aspect-ratio;
	position: relative;
	}

	// Video embed iframe
	.rwd-video {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	}