Unter Responsive Design versteht man das Anpassen eines Design an eine Bildschirmgröße. So werden bspw. Schriften für kleine Displays größer und unwichtige Elemente ausgeblendet.

Damit sich YouTube-Videos in einem responsivem Website-Design einpassen, muss man sich eines kleines Tricks bedienen: Das Video muss in einen DIV-Container eingebunden und darin skaliert werden.

<div class="video-container">
	<iframe src="https://www.youtube.com/embed/YE7VzlLtp-4" width="560" height="315" frameborder="0" allowfullscreen></iframe>
</div>

CSS:

.video-container {
	position: relative;
	height: 0;
	overflow: hidden;
	padding-top: 30px;
	padding-bottom: 56.25%;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

Quelle: Avex Designs: Responsive YouTube videos with CSS

• video2brain: Responsive Design – Das große Training