Really responsive Youtube iFrame (width XOR height ) *Preview available here: https://www.thebouqs.com/en/content/8-how-it-works

responsive-youtube-iframe.css

#hero { width:100%;height:100%;background:url('{$img_ps_dir}cms/how-it-works/hero.jpg') no-repeat top center; }
.videoWrapper { position:relative;padding-bottom:56.25%;padding-top:25px;max-width:100%; }

@media (min-width:1000px) {
	#hero { background-size:cover; }
}
@media (max-width:767px) {
	#hero { width:100%;height:94%!important;background:url('{$img_ps_dir}cms/how-it-works/hero-mobile.jpg') no-repeat top center;background-position: 0 -155px;height: 273px!important;background-position:0 -209px; }
}
@media (max-width:540px) {
	#hero { background-position:-178px -209px; }
}
@media screen and (min-width: 500px) and (min-height: 980px) {
	#hero { height:50vh!important; }
}

responsive-youtube-iframe.html

<div id="hero">
	<div class="container">
		<div class="row-fluid">
		
			<script src="https://www.youtube.com/iframe_api"></script>
			<center>
				<div class="videoWrapper">
					<div id="player"></div>
				</div>
			</center>
			<script>
			function onYouTubeIframeAPIReady() {
				player = new YT.Player('player', {
					videoId:'xxxxxxxxxxx',playerVars: { controls:0,autoplay:0,disablekb:1,enablejsapi:1,iv_load_policy:3,modestbranding:1,showinfo:0,rel:0,theme:'light' }
				} );
				resizeHeroVideo();
			}
			</script>
		</div>
	</div>
</div>

responsive-youtube-iframe.js

var player = null;
$( document ).ready(function() {
	resizeHeroVideo();
} );

$(window).resize(function() {
	resizeHeroVideo();
});

function resizeHeroVideo() {
	var content = $('#hero');
	var contentH = viewportSize.getHeight();
	contentH -= 158;
	content.css('height',contentH);
	
	if(player != null) {
		var iframe = $('.videoWrapper iframe');
		var iframeH = contentH - 150;
		if (isMobile) {
			iframeH = 163; 
		}
		iframe.css('height',iframeH);
		var iframeW = iframeH/9 * 16;
		iframe.css('width',iframeW);
	}
}