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

вставить видео с 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 желательную высоту видео.

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

Если вы хотите, чтобы видео было адаптивным и по ширине отображалось на 100% выводимой области, то можно применить следующий прием.

Видео выводится на сайте в теге iframe. Добавьте в файл style.css вашей темы следующий код:

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

Лучше всего ограничить действие этого правила только на содержимое поста. Для этого нужно посмотреть каким классом он обрамляется, например entry (также это может быть post и т.д.). В этом случае первая строка в вышеприведенном правиле будет выглядеть так:

Кроме того, нужно указать, что максимальный размер видео не должен превышать ширину экрана. Для этого в файле style.css прописываем инструкцию:

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

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

6 комментариев

  1. Фёдор 2 года назад
  2. admin 2 года назад
  3. Олег 1 год назад
  4. Иван 4 месяца назад
    • admin 4 месяца назад

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