Добавляем видео с Ютуб на сайт и меняем его размеры

вставить видео с youtubeЕсли говорить о добавлении видео на сайт, то, в  первую очередь вебмастеров, конечно же, интересует youtube.

Те, кто давно использует wordpress, помнят, что когда-то, чтобы вставить ролик на страницу, нужно было использовать специальные плагины. Однако сейчас достаточно просто добавить в пост ссылку на youtube в виде отдельной строки, например —

При формировании страницы эта ссылка автоматически преобразуется в видео с ютуба.

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

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

Приведу их перечень с официального сайта WP:

  • Animoto
  • Blip
  • CollegeHumor
  • DailyMotion
  • Flickr
  • FunnyOrDie.com
  • Hulu
  • Imgur
  • Instagram
  • Issuu
  • Meetup.com
  • EmbedArticles
  • Mixcloud
  • Photobucket
  • PollDaddy
  • Rdio
  • Revision3
  • Scribd
  • SlideShare
  • SmugMug
  • SoundCloud
  • Spotify
  • TED
  • Twitter
  • Vimeo
  • WordPress.tv
  • YouTubeiSnare

Как настроить размеры видео

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

До версии 3.5 wordpress позволял настроить размеры выводимого видео в настройках Медиа – там был блок Embeds.

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

Чтобы самостоятельно определить размеры видео на страницах своего сайта нужно добавить в файл functions.php вашей текущей темы строку вида:

Здесь 600 – это желательная ширина видео в пикселях, у каждого она будет своя.

После этого wordpress будет выводить его именно с такой шириной.

Еще один прием, это переопределить размеры видео по умолчанию. Для этого в functions.php добавляем код:

Вместо 645 укажите желательную ширину, а вместо 400 желательную высоту видео.

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

Существует отличный плагин FitVids for WordPress, автоматически делающий почти все известные форматы видео адаптивным. Настройки плагина Fitvids по умолчанию подходят почти для всех случаев.

fitvideo

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

Также можно сделать видео адаптивным при помощи стилей.

Чтобы видео было адаптивным и по ширине отображалось на 100% выводимой области, добавьте в файл style.css вашей темы следующий код.

Видео выводится на сайте в теге iframe. Соответственно в этом случае содержимое тега iframe будет адаптироваться на 100% ширины области (значение width). C высотой (height) получается не так удобно и нужно задать подходящий размер. Данный прием не универсальный — iframe может использоваться на сайте и для других целей, но в большинстве случаев он подойдет.

Лучше всего ограничить действие этого правила только на содержимое поста. Для этого нужно посмотреть каким классом он обрамляется, например entry (также это может быть post и т.д.). В этом случае первая строка в вышеприведенном правиле будет выглядеть так:
.entry iframe {
Кроме того, нужно указать, что максимальный размер видео не должен превышать ширину экрана. Для этого в файле style.css прописываем инструкцию:

Плагины для вставки видео

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

Оцените статью
Делаем сайт своими руками
Комментарии: 8
  1. Фёдор

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

    Ответить
  2. Ложников Андрей (автор)

    Федор, попробуйте на объекте (видео) в редакторе установить выравнивание (влево/вправа) с помощью кнопок редактора.

    Ответить
  3. Олег

    Не скажете как увеличить размер загружаемого файла в wp? Имеются ввиду большие видеофайлы. Максимально получается загрузить 2Гб, потом говорит мол «Файл пуст.. «. В php.ini всё прописано нормально, сервер большой и мощный ))

    Ответить
    1. Ложников Андрей (автор)

      Олег, здесь посмотрите, какие есть способы — https://delaemsait.info/kak-uvelichit-maksimalnyj-obem-zagruzhaemyx-fajlov-v-wordpress/

      Ответить
  4. Иван

    Подскажите пожалуйста, почему у меня не отображаются видео с ютуба? хотя они есть если смотреть через редактируемую запись?

    Что нужно прописать что вы видео отображалось в опубликованной записи?

    Ответить
    1. Ложников Андрей (автор)

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

      Ответить
  5. Селёжа

    Устаревшая информация. В Новом WordPress-5 это не работает.

    Ответить
  6. Сергей

    Плагин FitVids for WordPress работает в WP 6.01

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