Эластичное видео

Изменяйте размер окна своего браузера, чтобы увидеть, как изменяются вместе с ним и размеры видео.

Новый тип кода YouTube (iframe)

Старый тип кода YouTube (embed)

С фиксированной шириной 600px

С фиксированной шириной 500px

CSS

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

HTML5 видео

CSS

video {
	max-width: 100%;
	height: auto;
}