Создание сайтов в Одессе. Заказать сайт Одесса. | Веб-студия ION ☎ (068) 351-76-21

Як адаптувати відео з 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%;}