Створення сайтів Львів067 607 57 84
МЕНЮ

Як зробити адаптивне відео YouTube на сайті

У цій статті ми розповімо про одну маленьку але дуже корисну річ, а саме про те як зробити відео з YouTube на вашому сайті адаптивним. Якщо ви ведете свій сайт і стикалися з тим що потрібно розмістити на сайті відео з сервісу YouTube, то швидше за все ви задалися питанням, як зробити його адаптивним, оскільки на мобільних пристроях вставлене відео не зменшується і починає ламати верстку і виходити за межі зображення.

Якщо ви розміщували код YouTube у себе на сайті то помітили що відео виводиться за допомогою тега iframe. Зазвичай код відео має приблизно такий вигляд:

<iframe width="560" height="315" src="https://www.youtube.com/embed/TdRllKvKi9k" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Навіть за кодом видно що за замовчуванням для відео вже задані розміри плеєра. Спочатку розміри такі - 560 пікселів ширина і 315 пікселів висота. На великому екрані і при нормальній ширині вашого сайту, такий розмір цілком допустимий, але якщо ширина екрану пристрою 420 пікселів? Результат - плеєр вилазить за межі видимої частини і сайт виглядає криво і неправильно. Як же вирішити дану задачу?

Інколи пропонують рішення коли прибирають з коду iframe значення розмірів, а потім просто через стилі CSS задають розміри плеєра для певної роздільної здатності екрану. Варіант допустимий, але трудомісткий і не завжди правильно відображається на сайті. Тим не менше, цілком робочий.

Ми пропонуємо більш простий спосіб. При його використанні плеєр буде чітко підлаштовуватися під розмір вікна браузера і коректно відображатися при будь-якій роздільній здатності екрану. Давайте подивимося, як це реалізувати.

Для початку вам потрібно буде розмістити код всередині блоку. Також блоку присвоїмо будь-який клас, наприклад - frame_blc.

<div class="frame_blc">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Y421bWMelqE" frameborder="0" allowfullscreen></iframe>
</div>

Тепер, потрібно додати універсальні стилі, які і будуть адаптувати розмір плеєра YouTube.

.frame_blc{
overflow:hidden;
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
}
.frame_blc iframe {
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
}

По суті ми робимо адаптивним наш батьківський блок, а сам плеєр робимо з абсолютним позиціюванням і розтягуємо на всю ширину і висоту щодо батьківського блоку. Для блоку основним параметром, на який слід звернути увагу, є - padding-bottom:56.25%. Він задає висоту батьківського блоку для плеєра у якого відеоролик має співвідношення сторін 16:9. Якщо Ваш відеоролик має співвідношення 4:3, то параметр буде - padding-bottom:75%.

Після виконаної роботи, ви можете перевірити результат. Тепер відео з YouTube адаптується під ширину блоку в якому воно знаходиться.