Для добавления видео с YouTube на сайт обычно используют готовый код видео-фрейма (<iframe>код видео</iframe>) но он по умолчанию не является адаптивным. Для того, чтобы сделать такое видео адаптивным и оно менялось в размерах при изменении разрешения экрана на разных мониторах и гаджетах, необходимо видео-фрейм стилизовать с помощью CSS.

Пример стилизации видео-фрейма с YouTube

.videowrap {
  max-width: 720px;
  margin: 0 auto;
}
.videoblock {
  position: relative;
  padding-bottom: 56.25%; /*для видео из соотношением экрана 16:9*/
  height: 0;
  overflow: hidden;
}
.videoblock iframe, object, embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

Пример вставки видео-фрейма с YouTube

<h1>Заголовок видео</h1>
<div class="videowrap">
  <div class="videoblock">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/FjM1dT2_JcE" allowfullscreen></iframe>
  </div>
</div>