Видео с YouTube, которое обычно вставляют с помощью вставки в html-код страницы готового фрейма, который копируют с YouTube, по умолчанию не является адаптивным. Для того, чтобы сделать такое видео адаптивным, т.е. чтобы оно менялось при изменении разрешения экрана на разных мониторах и гаджетах, необходимо такой видео-фрейм из YouTube стилизовать с помощью 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>