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

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

Використання адаптивного відео на сайті є важливим, оскільки дозволяє вашим відвідувачам переглядати контент на будь-якому пристрої — від комп'ютерів до смартфонів. Адаптивність відео означає, що воно буде автоматично пристосовуватись до розміру екрану, забезпечуючи оптимальний перегляд незалежно від пристрою.

Вставляємо YouTube відео

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

У результаті ваш код з відео повинен виглядати приблизно так:

<div class="youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/9bZkp7q19f0?si=OnWY9eOF2HHSgMNl" frameborder="0" allowfullscreen></iframe>
</div>

Робимо відео адаптивним через CSS

Одним з найпростіших способів зробити відео адаптивним є використання CSS стилів. Ви можете створити відповідний CSS-клас для контейнера відео та задати йому властивості, що забезпечують адаптивність.

Додайте цей CSS код до файлів стилю вашого сайту:

.youtube {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
  }
  .youtube iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
	border-width: 0;
	outline-width: 0;
  }

У цьому прикладі ми задаємо розміри контейнера відео з використанням відсотків. За що відповідають деякі властивості, наведено у цій таблиці:

В результаті ми отримуємо адаптивний контейнер для відео, який змінюється залежно від розміру екрану. До речі, я думаю що ви вже здогадались, що таким чином ви можете вставляти будь-яке відео, а не тільки YouTube 😉

Висновок

Адаптивне YouTube відео на сайті — це важлива функція, яка дозволяє вашим відвідувачам зручно переглядати відео контент незалежно від пристрою. Завдяки використанню CSS стилям ви можете створити адаптивний контейнер для відео, що змінюється відповідно до розміру екрану. Це забезпечить оптимальний перегляд вашого відео на будь-якому пристрої, що підвищить зручність використання вашого сайту в цілому. Розуміння та використання адаптивності відео на сайті є важливим кроком у покращенні веб-дизайну та взаємодії з користувачами.