На YouTube есть функция поделиться видео. То есть, можно скопировать html код и вставить его на сайте.
Но в коде, который мы вставим указан размер iframe блока. А нам нужно, чтобы видео пропорционально менялось при изменении ширины браузера.
Это можно реализовать с помощью следующего кода.
Тэг iframe заключаем в блок div c классом video-responsive
HTML код для адаптации YouTube видео
<div class="video-responsive"> <iframe width="420" height="315" src="https://www.youtube.com/embed/UcsA-o6nKlg" frameborder="0" allowfullscreen></iframe> </div>
И CSS код для класса video-responsive
/* youtube */
.video-responsive {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
margin: 0px auto;
/* max-width: 800px;*/
width: 75%;
}
.video-responsive iframe {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
@media (max-width: 767px) {
.video-responsive {
width: 100%;
}
}
/* end youtube */