Responsive video с фиксированным соотношением сторон

Сначала создаем элемент контейнер, в котором реализуем нужное соотношение сторон с помощью padding, потом помещаем видео в этот контейнер, и абсолютным позиционированием растягиваем на весь размер контейнера.

Нужное соотношение стороно получаем с помощью вертикального padding. Если указывать его в процентах, то он будет рассчитываться от ширины элемента. Например, если нужно соотношение стороно 16:9, то ставим padding-bottom: 56.25% (16:9 это 100% * 9 / 16 = 56.25%); если нужно 16:10, то ставим 62.5%.

А растянуть видео можно или с помощью top: 0; left: 0; width: 100%; height: 100%; или с помощью top: 0; left: 0; right: 0; bottom: 0;.

В итоге получается что-то типа такого.

.media-embed-wrapper {
	box-sizing: border-box;
	max-width: 800px;
}

.media-embed {
	box-sizing: border-box;
	position: relative;
	border: none;
	width: auto;
	padding: 0;
	margin: 0;
	height: 0;
}

.media-embed,
.media-embed--16x9 {
	padding: 0 0 56.25% 0; /* 16:9 */
}

.media-embed--16x10 {
	padding: 0 0 62.5% 0; /* 16:10 */
}

.media-embed iframe,
.media-embed object,
.media-embed embed {
	box-sizing: border-box;
	position: absolute;
	border: none;
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	left: 0;
	top: 0;
}

<div class="media-embed-wrapper">
	<div class="media-embed">
		<object data="https://www.youtube.com/embed/hNQFjqDvPhA?rel=0" standby="Загрузка…"></object>
	</div>
</div>