Responsive YouTube Iframe

app.js

// Add a wrapper to any YouTube video. Depends on jQuery.
if ( $('iframe[src*="youtube."]').length ) {
	$('iframe[src*="youtube."]').each( function () {
		// Use the video's specified width as a max so we don't stretch.
		var width = $(this).attr('width');
		$(this).wrap('<div class="video-wrap" style="max-width:'+width+'px;"><div class="inner"></div></div>');
	});
}

global.scss

// Style the wrapper
.video-wrap {
	display: block;
	margin: 5px auto 25px;
	.inner {
		position: relative;
		padding-bottom: 56.25%;
		padding-top: 10px;
		width: 100%;
		height: 0;
		overflow: hidden;
	}
	iframe {
		position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
	}
}