Как сделать адаптивное видео или правильная вставка видео из 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 стилей. А уже непосредственно в статье оборачивайте необходимую ссылку тегами.

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

Оцените статью
Просто Делай Так
Понравилась Вам такая вставка видео?

  1. Татьяна

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

    Ответить
    1. Татьяна, а что мешает? Вопрос пары часов 🙂

      Ответить
  2. Светлана Молодежникова

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

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

      Ответить
  3. Юрий

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

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

      Ответить
  4. Валера

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

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

      Ответить
  5. Нина

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

    Ответить
    1. Главное, что пригодилась! Спасибо за оценку!

      Ответить
  6. Василий

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

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

      Ответить
  7. Игорь

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

    Ответить
    1. Эту проблему можно с успехом побеждать! И это радует

      Ответить
  8. Александр

    В сафари, на айфоне, видео к сожалению не становится адаптивным, но в хроме на андроиде все красиво. Почему так?

    Ответить
    1. Сергей Почечуев автор

      Это всё из-за разных технических решениий, применяемых в сафари и в айфоноах. Для них просто нужен специальный код, которого я к сожалению не могу подсказать. Но все-таки постараюсь поискать ответы на этот вопрос.

      Ответить
      1. Сергей Почечуев автор

        Спасибо за отзыв. Рад, что статья пригодилась.

        Ответить
  9. Марина

    Ураааа…. я сделала это!!!!
    Видео на сайт было вставлено моё личное (из ВКонтакте). Посмотрела по моб. телефону с маленьким экраном — видео вылезает изо всех щелей и из-за этого перекосилась вся страница. Два дня «ни пивши/ни евши» искала решение. Боялась лезть в какие-то коды. Но, прочитав эту статью…. с криком Ё МАТЬ полезла в стили сайта… УФФФФ. Получилось!!!
    СПАСИБО!!!!!

    Ответить
    1. Сергей Почечуев автор

      Спасибо за такой классный комментарий-отзыв!

      Ответить
  10. Виктор

    Спасибо. Помогло. Мне надо было для широкой страницы.

    Ответить
    1. Сергей Почечуев автор

      Что самое интересное — в новых шаблонах (я сейчас тестирую шаблон Gloria на замену этому) об этом голова совсем не болит. Сколько есть свободного места, столько видео и займет. Адаптация тоже автоматическая, а вставляется видос просто ссылкой без всяких допкодов для бубна.

      Ответить
  11. Софья

    О, то что надо! Сейчас займусь адаптацией, спасибо!

    Ответить
    1. Сергей Почечуев автор

      Софья, спасибо за оценку. Конечно, видео на сайте тоже должно быть адаптивным, как и сам сайт

      Ответить
  12. Алек

    не работает способ.
    ваш сайт и попандеры жутко тормозят

    Ответить
    1. Сергей Почечуев автор

      Не знаю, я попандеры не ставил на сайт. Смотрите свой браузер на вирусы

      Ответить
  13. Григорий

    Я скопировал и вставил код в wordpress — не работало, потратил часа 2 на перемещение css-кода в разные css файлы (у моей темы их 5ть и в каждой описания стилей под кучу разных разрешений). По итогу оказалось что wordpress добавил вторые ковычки в , удалил ковычки и все заработало. Спасибо за дельную статью!

    Ответить
    1. Сергей Почечуев автор

      Да, порой дьявол кроется в мелочах. Особенно при работе с кодом.

      Ответить
  14. Ольга

    Здравствуйте.

    Где лайкнуть не поняла, поэтому говорю благодарю.

    Ответить
    1. Сергей Почечуев автор

      Спасибо!

      Ответить
  15. Руслан

    Спасибо!

    Ответить
    1. Сергей Почечуев автор

      Взаимно!

      Ответить
  16. Александр

    Спасибо!

    Ответить
  17. Вероника

    Спасибо, очень выручили!

    Ответить
    1. Сергей Почечуев автор

      Взаимно! И Вам спасибо за отзыв!

      Ответить
  18. Дмитрий

    Работает.Спасибо Вам.

    Ответить
    1. Сергей Почечуев автор

      И Вам спасибо!

      Ответить
  19. Чувак

    Это же под определенный формат (соотношение сторон) видео. А если оно буде в другом формате? По кадый формат стилизовать уникальный контент?
    Не проще ли на js написать?

    Ответить
    1. Сергей Почечуев автор

      Скорее всего теперь и этого не придется делать, если использовать гутенберг

      Ответить
  20. Дима

    РИспек очень помог братишка ))

    Ответить
    1. Сергей Почечуев автор

      Да, вот только с Гутенбергом есть свои особенности. С ним стало проще добавлять код.

      Ответить
  21. Юрий

    Здравствуйте, спасибо всё работает. Но, есть НО.
    Видео растягивается на весь экран и на десктопе. А мне этого не надо. Как сделать так, чтобы на десктопе были исходные размеры, а на мобильниках на ширину экрана. Спасибо

    Ответить
    1. Сергей Почечуев автор

      Юрий, вам нужно дополнить правила для размеров через медиазапросы
      Например:
      @media (min-width: 11400px) {
      width {
      width:600px;
      }
      Будет показывать при разрешениях более 1140рх видеоплеер с размерами 600рх, а при меньших экранах — растягивать видео по на весь экран.
      Напишите мне в ВК, скину несколько ссылок на эту тему.

      Ответить
  22. Эрик

    Спасибо, работает! Ураа

    Ответить
  23. irmaseo.ru

    Спасибо за полезную информацию

    Ответить
    1. Сергей Почечуев автор

      И Вам спасибо за оценку!

      Ответить
Примечание

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