Как адаптировать видео с iframe (YouTube и Vimeo) для сайта
Рекомендуем поместить iframe в блок div с заданными пропорциями. А видео абсолютно позиционировать в этом div. Видео в iframe будет увеличиваться и уменьшаться вслед за родительским div и сохранять нормальные пропорции.
Код поставить с видео в нужное место:
<div class=”video”>
Тут код видео
</div>
Поставить в стили в файл CSS:
.video {position:relative;padding-bottom:56.25%;//padding-top:25px;height:0;}
.video iframe {position:absolute;top:0;left:0;width:100%;height:100%;}
Стили если у Вас бутстрап 3:
@media (max-width: 767px) {
.video {
margin-left: -30px;
margin-right: -30px;
padding-top: 25px;
top: 10px;
}
}
.video {position:relative;padding-bottom:56.25%;/*пропорции видео 16:9 */padding-top:; height:0;}
.video iframe {position:absolute;top:0;left:0;width:100%;height:100%;}