При встраивании видео с YouTube на свой веб-сайт вы, вероятно, обнаружили небольшую, но очень досадную проблему: встроенные видео с YouTube изначально не адаптируются. Это означает, что когда вы просматриваете свою веб-страницу, например, на мобильном устройстве, размер видео не изменяется должным образом вместе с остальными элементами страницы. Это может негативно сказаться на дизайне и удобстве использования вашего сайта. Так почему же это происходит и что с этим делать?

Почему видео на YouTube не реагируют

Стандартные YouTube Embeds, такие как приведенный ниже, используют iFrames для создания встроенного видеоплеера:

Преимущество использования iFrames? Это простой фрагмент HTML. Кроме того, он позволяет встраивать YouTube в самые разные варианты использования, приложения и системы управления контентом. YouTube также может обновлять существующие встроенные видео, например, новыми стилями проигрывателя или рекламными скриптами со стороны сервера, не требуя от пользователей изменения кода на своих веб-сайтах. Это работает, потому что iFrame по существу действует как окно на другую страницу.

Но есть и обратная сторона. Использование iFrames может замедлить загрузку видео YouTube на любой странице. Это также может означать, что видео не всегда видны при первой отрисовке, поскольку браузеру необходимо найти и загрузить iFrame, прежде чем он сможет загрузить видео. Наконец, что еще более неприятно, без CSS или Javascript не существует собственного способа адаптации видео YouTube к контейнеру. Вот почему для встраивания указывается размер (по умолчанию 560 x 315).

Как следствие, чтобы сделать вставку YouTube действительно отзывчивой и оптимизированной для мобильного дисплея, вам нужно проделать дополнительную работу. К счастью, есть несколько простых способов, чтобы это произошло.

Способ 1: немного пользовательского CSS

Самый простой способ использования CSS для создания адаптивных встраиваний — создать класс со свойством «соотношение сторон». Это свойство позволяет указать соотношение сторон создаваемого класса, чтобы его размер всегда изменялся внутри контейнера в соответствии с этим соотношением сторон. Учитывая, что все встраиваемые видео YouTube представлены с соотношением сторон 16 × 9, это означает, что вы можете использовать это свойство, чтобы обеспечить соответствующее масштабирование.

Давайте посмотрим, как работает первый метод.

Сначала создайте класс, например «youtube-video». Затем присвойте ему соотношение сторон, установленное на 16/9, с шириной 100%.

.youtube-video {
  aspect-ratio: 16 / 9;
  width: 100%;
}

Затем вам нужно будет применить этот класс к любой вставке YouTube в код, удалив при этом ширину и высоту по умолчанию.

<iframe class="youtube-video" src=" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Этот метод очень прост для тех, кто умеет редактировать базовые CSS и HTML. Тем не менее, это требует некоторой работы для каждого отдельного встраивания YouTube. Это далеко не идеально, особенно для веб-сайтов с несколькими авторами и редакторами, которые, вероятно, все пытаются встроить видео YouTube в страницы и сообщения.

Способ 2: Блоки Гутенберга в адаптивных темах

Некоторые темы WordPress, такие как Вдохновение а также отзывчивый, иметь функции, которые автоматизируют реакцию на встраивание видео. Поэтому, если вы готовы изменить свою тему и шаблоны, просто установите один из них. Эти темы имеют правило CSS, аналогичное первому методу, встроенному в тему. Затем это правило будет применяться к определенным блокам и отображаться в теме.

Другими словами: если вы используете блок «видео» Гутенберга, куда вы вставляете URL-адрес видео YouTube, которое хотите встроить, ваши видео останутся адаптивными.

Тем не менее, обязательно сначала протестируйте эти темы на своем веб-сайте. Конкретная реализация может не работать идеально с вашими видео.

Способ 3: с плагином Yoast Video SEO

Если вы пользователь WordPress, самый простой и быстрый способ решить эту проблему — использовать плагин Yoast Video SEO. В дополнение к автоматическому включению метаданных, которые повышают рейтинг ваших видео в результатах поиска Google, JavaScript автоматически изменяет размер встроенного видео для любого устройства и размера браузера. Помимо размера контейнера, видео будет регулировать свою высоту и ширину по мере масштабирования страницы. Так что вам не нужно беспокоиться о внедрении пользовательского CSS или утомительном тестировании браузера!

Кроме того, плагин Yoast Video SEO использует асинхронный JavaScript, чтобы максимально ускорить время загрузки видео на YouTube. Это гарантирует, что ваши видео будут доставлены наилучшим образом, гарантируя высокую скорость воспроизведения и вовлеченность. Плагин стоит 79 долларов в год, его установка и настройка занимает всего пару минут, и он гарантирует, что вам никогда больше не придется беспокоиться об адаптивных видео.

Резюме

Видео — отличный инструмент для использования на вашем сайте. Люди любят их! Но если они не масштабируются с остальной частью вашего сайта, они могут выглядеть неуклюжими. К счастью, есть несколько способов обеспечить адаптивность встроенных видео. Либо с небольшим количеством пользовательского CSS, либо установив полезный плагин, такой как Yoast Video SEO, вы можете убедиться, что ваши видео на YouTube правильно изменяются. Вы также можете изменить свою тему на ту, которая автоматически реагирует на видео. Если у вас есть дополнительные вопросы или предложения, пожалуйста, оставляйте их в комментариях.

Подробнее: YouTube против собственного сайта: что лучше для видео SEO? »