Как встроить адаптивное видео YouTube на веб-сайт

Последнее обновление Июл 12, 2021

Содержание

Встраивайте адаптивное видео YouTube с помощью Bootstrap

Адаптивное видео YouTube с использованием Fancybox

Размещение видео с 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>

Lite YouTube встраивает

В первом методе мы использовали код iframe. При использовании iframe браузеру необходимо загрузить около 800 КБ данных для рендеринга видео.

Используя fancybox, вы можете уменьшить эту нагрузку. Но опять же вы должны включить их CSS и JS. Чтобы уменьшить нагрузку на сервер, рекомендуется добавлять эти файлы через CDN.

Работая над этой темой, я наткнулся на статью, в которой по-другому объясняется встраивание видео с YouTube. Ему не нужно использовать iframe при загрузке страницы или включать какие-либо файлы.

В статье представлен код, который любой может легко добавить в свое приложение. Следуйте статье Lite YouTube Embeds и добавьте код, как предлагается.

Это 3 возможных способа встраивания адаптивного видео YouTube. В зависимости от ваших требований вы можете выбрать любое из решений.

Статьи по Теме

Источник записи: artisansweb.net