...
✅ WEB і WordPress новини, теми, плагіни. Тут ми ділимося порадами і кращими рішеннями для сайтів.

Як вставити чуйне відео YouTube на веб-сайт

23

Розміщення відео 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. Залежно від ваших вимог, ви можете вибрати будь-яке із рішень.

Пов’язані статті

Джерело запису: artisansweb.net

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі