Как сделать адаптивное видео YouTube или Vimeo на сайте

Последнее изменение поста: Июнь 4, 2017

Всем привет! Сегодня я расскажу, как на сайте сделать адаптивное видео с YouTube и для чего это надо. Известно, что адаптивные сайты нужны для нормального их отображения на мобильных устройствах. Но, если на сайте, Вы размещаете видео, то и оно должно быть адаптивным.

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

Для тех, кто не понимает, о чем идет речь - я поясню. Вот так мой сайт выглядит на мобильном телефоне.

Как сделать адаптивное видео на сайте

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

Как сделать адаптивное видео на сайте

Здесь видно, что видео на мобильном телефоне не вмещается в экран, и просматривать его будет неудобно. Все эти проблемы могут учитываться поисковиками, поэтому лучше это исправить. После проверки своего сайта в Яндекс инструментах, я получил следующий отчет

Как сделать адаптивное видео на сайте

Также я проверил сайт и в Google, и тоже получил неплохие результаты. Но над некоторыми проблемами придется еще поработать.

Как сделать адаптивное видео на сайте

Советую и Вам проверить свой сайт (ы) на мобильность, и узнать, какие ошибки в нем таятся.

Итак, мы разобрались, для чего нужно делать адаптивное видео на сайте, и пора перейти к делу.

Создаем адаптивное видео на сайте

Найдите в своей теме файл style.css и вставьте в него, в самый конец следующий код:


Вот в принципе и все. Теперь для вставки видео с YouTube или Vimeo на свой сайт, делаем все то же самое, как и прежде: переходим в текстовый редактор; вставляем код видео; но потом оборачиваем его в блок div. Вот как это выглядит:

<div class="video-block"> … код youtube или vimeo … </div>

Зайдите теперь на страницу сайта с мобильного телефона, и посмотрите, как выглядит видео. Оно должно быть видно полностью, как на скриншоте ниже

Как сделать адаптивное видео на сайте

Если после проделанных манипуляций, у Вас ничего не изменилось, тогда проверьте, все ли Вы сделали правильно. Даже, если у Вас сам сайт не адаптивный, то это никак не должно влиять на видео.

Получайте свежие статьи на свою почту

Поделиться статьей с друзьями


2 Comments

  1. Здравствуйте, Юрий.
    Интересное решение для помещения видео. В данный момент пользуюсь плагином Шорткоды пока устраивает и видео устанавливает нормально, правда есть один недостаток слишком много ест ресурса, этот плагин.
    Все собираю коды для внесения разных элементов на сайт и возможно в скором откажусь от плагина полностью.
    Благодарю за труд.

    • Здравствуйте, Павел
      Если плагин требует много ресурсов, то лучше от него отказаться. Сделать все настройки, описанные в этой статье – не займет много времени, да и способ этот вообще не нагружает сайт. Правда придется изменить на всех страницах код, где установлено видео.

Оставить комментарий