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

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

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

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

[lazy_load_box effect=»slidefromleft» speed=»1900″ delay=»10″] Как сделать адаптивное видео на сайте[/lazy_load_box]

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

[lazy_load_box effect=»slidefromleft» speed=»1900″ delay=»10″]Как сделать адаптивное видео на сайте[/lazy_load_box]

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

[lazy_load_box effect=»slidefromleft» speed=»1900″ delay=»10″]Как сделать адаптивное видео на сайте[/lazy_load_box]

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

[lazy_load_box effect=»slidefromleft» speed=»1900″ delay=»10″]тест скорости загрузки сайта[/lazy_load_box]

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

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

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

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


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

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

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

[lazy_load_box effect=»slidefromleft» speed=»1900″ delay=»10″]видео на мобильном телефоне[/lazy_load_box]

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

2 комментария к “Как сделать адаптивное видео YouTube или Vimeo на сайте”

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

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

Комментарии закрыты.

Прокрутить вверх