Свежие статьи »
ГЛАВНАЯ / Делаем свой сайт / Как сделать адаптивное видео или правильная вставка видео из Youtube на сайт
Как сделать адаптивное видео

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рекомендую!

новости Google

Важные новости от Google по продвижению сайтов

Здравствуйте, друзья! Вчера из мира Google пришла очередная новость. Большинству из владельцев сайтов она окажется …

Цитаты тул

Как оформить статью на сайте, чтобы удержать внимание читателей

Здравствуйте, друзья! Думаю, что у многих авторов время от времени возникает необходимость акцентировать внимание своих читателей …

42 комментария

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

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

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

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

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

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

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

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

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

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

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

  8. Александр

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

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

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

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

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

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

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

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

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

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

  15. Спасибо!

  16. Вероника

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

  17. Дмитрий

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

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

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

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

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

Добавить комментарий для Ольга Отменить ответ

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