Как растянуть видео по ширине родительского контейнера?

Многие веб разработчики сталкиваются с проблемой интеграции видео с Youtube в сайты с адаптивным дизайном. Всё дело в том, что Youtube даёт фиксированные  размеры видео, а это значит, что при сжатии окна браузера всё это дело будет выглядеть не красиво. 

Существует несколько способов изменения ширины и высоты видео. Один из них это изменение  размеров видео с помощью Javascript. И всё таки для большинства разработчиков, простых создателей сайтов эта технология малознакома. На помощь приходит давний друг —  CSS.

Для начала необходимо поместить в то место где вы желаете выводить видео такой код:

<div class="video">
<iframe src="https://www.youtube.com/embed/KtIgZNZUkC4" frameborder="0" allowfullscreen></iframe>
</div>

Также не забудьте тэг iframe поменять на свой, который получили на сервисе ютуб и других.

Далее делаем оформление в css файле?

.video{
 width: 100%;
 position: relative;
 padding-top: 56.25%;
 margin: 0 auto;
}
.video iframe, .video object, .video embed{
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

Логика этого примера проста и полностью рабочая! Создавайте сайты с легко адаптирующимся видео. И удачи вам!