Як адаптувати відео з iframe (YouTube і Vimeo) для сайту
Рекомендуємо помістити iframe в блок div з заданими пропорціями. А відео абсолютно позиціонувати в цьому div. Відео в iframe буде збільшуватися і зменшуватися слідом за батьківським 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%;}