Сначала создаем элемент контейнер, в котором реализуем нужное соотношение сторон с помощью 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>