Как сделать адаптивное видео или правильная вставка видео из Youtube на сайт

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

Здравствуйте, друзья! Все мы знаем, что поисковые системы оценивают мобильность темы сайта. В Сети уже валом адаптивных тем для всех типов CMS. Но оказывается сама по себе адаптивность темы не решает всех проблем. Она конечно адаптирует контент, но к сожалению иногда под исключение попадает видео, вставляемое  с Youtube. Однако буквально несколько строк кода помогут выйти победителем из данной ситуации.

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

Оценка Яндекс-вебмастера

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

Обычно вставляют видео через шорткоды самого WordPress (добавить медиафайлы со стороннего сайта)
как вставить видео на сайт

или путем копирования и вставки записи фрейма, которую формирует Ютуб через поделиться и выбор режима HTML-код.

код фрейма видео из Youtube

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

Сравнение способов вставки

Вы сами прекрасно видите суть проблемы невооруженным взглядом. Как говорят в таких случаях: без комментариев! При этом стоит отметить, что горизонтальный скрол на экране не появляется.  Именно по этой причине Яндекс и прислал свое уведомление.

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

По большому счету без разницы, какую Вы ссылку будете вставлять и как. Важно заключить ее в контейнер, чтобы получилась вот такая конструкция:

<div>ссылка на видео</div>

Но конечно само по себе помещение в контейнер не даст ничего, если не прописать стили в файле CSS темы:

/* Код для адаптации видео */
.video-responsive {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Конец кода для адаптации видео */

После этого останется просто ссылаться на указанные стили при вставке видео. Для этого в режиме редактора «Текст» к тому самому блоку <div>, про который я писал выше, нужно добавить класс стилей и все автоматом встанет на места:

<div class=″video-responsive″>ссылка на видео</div>

На примере вставки видео через штатный ютубовский фрейм Ваша запись будет выглядеть примерно таким образом:

<div class="video-responsive">
<iframe src="https://ссылка на видео" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>

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

За счет добавления такой записи уже будет без разницы, как Вы вставляете свое видео — оно прекрасно будет адаптироваться.

Думаю, что данная статья пригодиться многим блогерам. В свое время эту тему активно обсуждали в Интернете. Я их пересмотрел много. Выбрал самую оптимальную «формулу» стилей. Дополнительно бы посоветовал заменить указанные  явно параметры фрейма по высоте и ширине (в вышеприведенном коде — это  width=″560″ height=″315″) на такие: width=″auto″ height=″auto″. Это позволит фрейму занять всю доступную ширину и освободит Вас от необходимости центровки.

Вот собственно и весь секрет адаптированного видео. Если осталось что-то непонятным, пишите. Но во всяком случае рекомендую проверить свои странички с видеоконтентом на адаптивность с помощью браузера. Как это сделать смотрите в статье Как правильно проверить сайт на мобильность с помощью браузера. И если видео на Вашем сайте вылезает за край, то просто скопируйте стили из статьи и добавьте к себе на сайт в файл CSS стилей. А уже непосредственно в статье оборачивайте необходимую ссылку тегами.

С уважением, Сергей Почечуев


ПОНРАВИЛАСЬ СТАТЬЯ? РАССКАЖИ ДРУЗЬЯМ!


ПОДПИШИСЬ НА ОБНОВЛЕНИЯ БЛОГА
и получай новые материалы на почту!
 

ПОДПИСАТЬСЯ НА НОВОСТИ
 

100% гарантия конфиденциальности.
В любой момент Вы сможете отписаться.

 

14 комментариев на Как сделать адаптивное видео или правильная вставка видео из Youtube на сайт

  1. У меня вообще блог не адаптирован.Сначала надо с этим как-то разобраться.Потом уже видео буду адаптировать по твоему совету.

  2. Пара часов для адаптирования блога? есть инструкция?

    • admin:

      Светлана — все просто: эта пара часов уйдет на замену темы сайта. Нужно брать сразу адаптивную Я свою брал здесь бесплатно. Это моя тема https://vk.cc/6fjM04 Скачивал отсюда. Есть и другие. Сделайте поддомен и можно потестить на нем, как все выглядит.

  3. Придется исправлять кучу статей.
    Спасибо! Отличный совет, как сделать адаптивное видео.
    Специально добавил ключ))

    • admin:

      Даже если плагины брать, то все равно придется переправлять руками. А сделать все-равно нужно!

  4. Проверил, пока все нормально, но надо взять на заметку, может пригодится. Спасибо!

    • admin:

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

  5. Очень нужная информация! Спасибо!

  6. Я тоже об этом думал. У меня реализовано подобным образом, только без div. После ifame идет class=»video», а в CSS тоже вставлен код.

    • admin:

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

  7. Спасибо за статью! Та же проблема с видео в мобильной версии.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Друзья! Не удивляйтесь, что Вы сразу не видите свои комментарии.
Они обязательно появятся сразу после модерации.