Як вставити чуйне відео YouTube на веб-сайт
Розміщення відео YouTube на веб-сайтах є звичним явищем у наш час. YouTube надає iframe-код для вставки відео на веб-сайти. Однак відео, відтворене за допомогою цього iframe-коду, не реагує. Це означає, що на маленьких пристроях, таких як мобільний, планшет, ваше відео може виглядати неприємно.
Насправді, ваші вбудовані відео на YouTube повинні бути адаптивними для кращої взаємодії з користувачами. У цій статті ми вивчаємо, як вставляти адаптивні відео YouTube на свій веб-сайт.
Я знайшов 3 можливі шляхи досягнення нашого кінцевого результату. Давайте подивимося по черзі.
Вбудуйте чуйне відео YouTube за допомогою Bootstrap
Bootstrap – це найпопулярніший інтерфейсний інструмент, який допомагає розробляти адаптивні сайти. Він також пропонує просте рішення, щоб зробити ваше відео на YouTube чуйним.
Для початку спочатку потрібно включити CSS-файл Bootstrap наступним чином. Якщо ви вже використовуєте Bootstrap у своєму проекті, пропустіть цей крок.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />Далі використовуйте наступний HTML, щоб вставити своє відео за допомогою Bootstrap.
<div class="container">
<div class="embed-responsive embed-responsive-16by9">
<iframe src="https://www.youtube.com/embed/VIDEO_ID?rel=0"></iframe>
</div>
</div>Замініть заповнювач VIDEO_ID фактичним ідентифікатором відео. Спробуйте, і ви побачите, що ваше відео працює нормально на менших пристроях.
Ви можете прочитати про цей метод вбудовування в документації Bootstrap.
Чуйне відео YouTube із використанням Fancybox
Цей варіант дещо інший. Тут замість прямого відображення відео ми відображаємо ескіз відео YouTube. А потім, натиснувши ескіз, ваше відео почне відтворюватися у спливаючому вікні. Це можна зробити за допомогою фантазії.
Для того, щоб використовувати Fancybox, вам потрібно включити наступні файли CSS та JS на свій веб-сайт.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>Після цього розмістіть код нижче, і все готово.
<a data-fancybox="" href="https://www.youtube.com/watch?v=VIDEO_ID">
<img src="http://i3.ytimg.com/vi/VIDEO_ID/hqdefault.jpg" />
</a>Вбудований YouTube
У першому методі ми використовували код iframe. Використовуючи iframe, браузер повинен завантажити майже 800 КБ даних, щоб відтворити відео.
Використовуючи fancybox, ви можете зменшити це навантаження. Але знову ж вам доведеться включити їх CSS та JS. Додавання цих файлів через CDN рекомендується для звільнення навантаження сервера.
Працюючи над цією темою, я натрапив на статтю, яка іншим чином пояснює вбудовування відео YouTube. Він також не повинен використовувати iframe при завантаженні сторінки, а також не повинен включати будь-які файли.
У статті наведено код, який кожен може легко додати до своєї програми. Будь-ласка, дотримуйтесь статті Lite YouTube Embeds і додайте код, як запропоновано.
Це 3 можливі способи вбудування адаптивного відео YouTube. Залежно від ваших вимог, ви можете вибрати будь-яке із рішень.
Пов’язані статті
- Як отримати список відео YouTube вашого каналу
- Як використовувати API YouTube для завантаження відео на канал YouTube
- Як отримати теги відео YouTube за допомогою API YouTube