Создание улучшенных рамок изображения с помощью режима наложенияСоздание адаптивного дизайна для встроенных видео с сайтов Youtube и Vimeo

Демонстрация работы адаптивного встроенного видео с сайта Youtube, адаптация примера из урока Dudley Storey, специально для сайта dejurka.ru

HTML

<div class="responsive-container">
	<iframe src="http://youtube.com/embed/SCm5akThsbA?rel=0" frameborder="0" allowfullscreen>
	</iframe>
</div>

CSS

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