Сегодня расскажу, как сделать адаптивное видео YouTube на сайте и для чего это надо. Известно, что адаптивные сайты нужны для нормального их отображения на мобильных устройствах. Но, если на сайте, Вы размещаете видео, то и оно должно быть адаптивным.
Для всех тех, кто интересуется не только адаптивностью, но и успешностью на YouTube тоже есть отличные новости. Требуются подписчики на канал или же просмотры, лайки и комментарии под видео? Сегодня все это можно заказать у команды профессионалов, онлайн пиар сервис удовлетворит своим широким ассортиментом услуг даже самого изысканного пользователя популярного видео хостинга.
Для тех, кто не понимает, о чем идет речь — я поясню. Вот так мой сайт выглядит на мобильном телефоне.
[lazy_load_box effect=»slidefromleft» speed=»1900″ delay=»10″]
То есть, страница сайта хорошо вписывается в экран смартфона, и это дает удобный просмотр страниц. Также должно выглядеть и видео. Но, если на сайте видео не адаптивное, то оно будет выглядеть приблизительно, так как на скрине ниже.
[lazy_load_box effect=»slidefromleft» speed=»1900″ delay=»10″]
Здесь видно, что видео на мобильном телефоне не вмещается в экран, и просматривать его будет неудобно. Все эти проблемы могут учитываться поисковиками, поэтому лучше это исправить. После проверки своего сайта в Яндекс инструментах, я получил следующий отчет
[lazy_load_box effect=»slidefromleft» speed=»1900″ delay=»10″]
Также я проверил сайт и в Google, и тоже получил неплохие результаты. Но над некоторыми проблемами придется еще поработать.
[lazy_load_box effect=»slidefromleft» speed=»1900″ delay=»10″]
Советую и Вам проверить свой сайт (ы) на мобильность, и узнать, какие ошибки в нем таятся.
Итак, мы разобрались, для чего нужно делать адаптивное видео на сайте, и пора перейти к делу.
Создаем адаптивное видео на сайте
Найдите в своей теме файл style.css и вставьте в него, в самый конец следующий код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/* Адаптация видео */ .video-block { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-block iframe, .video-block object, .video-block embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } |
Вот в принципе и все. Теперь для вставки видео с YouTube или Vimeo на свой сайт, делаем все то же самое, как и прежде: переходим в текстовый редактор; вставляем код видео; но потом оборачиваем его в блок div. Вот как это выглядит:
<div class="video-block"> … код youtube или vimeo … </div>
Зайдите теперь на страницу сайта с мобильного телефона, и посмотрите, как выглядит видео. Оно должно быть видно полностью, как на скриншоте ниже
[lazy_load_box effect=»slidefromleft» speed=»1900″ delay=»10″]
Если после проделанных манипуляций, у Вас ничего не изменилось, тогда проверьте, все ли Вы сделали правильно. Даже, если у Вас сам сайт не адаптивный, то это никак не должно влиять на видео.
Здравствуйте, Павел
Если плагин требует много ресурсов, то лучше от него отказаться. Сделать все настройки, описанные в этой статье — не займет много времени, да и способ этот вообще не нагружает сайт. Правда придется изменить на всех страницах код, где установлено видео.
Здравствуйте, Юрий.
Интересное решение для помещения видео. В данный момент пользуюсь плагином Шорткоды пока устраивает и видео устанавливает нормально, правда есть один недостаток слишком много ест ресурса, этот плагин.
Все собираю коды для внесения разных элементов на сайт и возможно в скором откажусь от плагина полностью.
Благодарю за труд.