Как вставить видео с Youtube (Ютуб) в статью на сайте WordPress (Вордпресс)

Как вставить видео с Youtube в статью на сайте WordPress

Приветствую на страницах своего блога! Продолжаю делать инструкции из серии “Для блога Вордпресс”. Уж очень зашла мне эта тема )).  Сегодня тема инструкции — Как вставить видео с Youtube (Ютуб) в статью на сайте WordPress (Вордпресс), в текстовом формате со скриншотами, а в завершение статьи вы найдете видео версию.

Есть несколько способов вставки видео в статью с ютуб на сайте вордпресс. У WordPress есть два редактора, для размещения статей, видео, картинок и прочего контента:

  • Блочный редактор Gutenberg
  • Классический редактор

Редакторы значительно отличаются своим функционалом. 

В этой инструкции буду показывать, как вставить видео на примере обоих редакторов. Ведь кому-то нравится пользоваться Gutenberg, а кому классикой. 

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

ПРИМЕЧАНИЕ: По ходу написания статьи вылез один косяк, но о нем в конце инструктажа. Там же вы найдете видео-инструкцию по данной теме со всеми подробностями

Как вставить видео в статью в блочном редакторе

Заходим в админку сайта Вордпресс, как это сделать, смотрите здесь. Далее в левой колонке жмем “Записи” и “Добавить новую”

как вставить видео на сайт вордпресс

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

  • через блок вставки — Произвольный html
  • через блок — Видео, где нужно вставить только ссылку на видео из Ютуб
  • YouTube URL — аналог блока “Видео”

Блок вставки “Произвольный html”. Между строчками, где нужно вставить видео наводим курсор мыши и жмем на значок “+” и “Посмотреть все”

wordpress видео с ютуба

Слева открывается область, где расположены все блоки для вставки, прокручиваем вниз и в разделе “Виджеты” находим блок “Произвольный  html”, жмем на него 

wordpress видео с ютуба

и видим, в тексте появился новый блок, где написано “Пишите html”

как вставить видео на сайт вордпресс

Переходим в YouTube к тому видео, которое нужно вставить в статью на блоге Вордпресс. Под роликом нажимаем “Поделиться”

как вставить видео на сайт вордпресс

Экран затемняется и появляется окно, в котором жмем “Встроить”

как вставить видео на сайт вордпресс

Открылся код видео, который необходимо скопировать. Перед копированием можно сделать некоторые настройки:

  • выставить время, с которого будет начинаться видео, например убрать вступление и приветствие, в статье ведь это уже есть, тут ставите галочку и меняете время на то, которое нужно
  • можно также убрать галочку напротив “Показывать панель управления проигрывателем”, на мой взгляд лучше этого не делать, мне нравится, когда в просматриваемом видео есть возможность управлять видео роликом

wordpress вставить видео с youtube

Скопировали код, возвращаемся в текстовый редактор Вордпресс и в поле вставляем html правой кнопкой мыши, или сочетанием клавиш Ctrl+V

wordpress вставить видео с youtube

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

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

wordpress вставить видео с youtube

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

wordpress вставить видео с youtube

Блок вставки “Видео”. В левом верхнем углу нажимаем на значок “+”, откроется область с блоками. Прокручиваем вниз и в разделе “Медиа” находим блок с названием “Видео”

wordpress вставить видео с youtube

wordpress вставить видео с youtube

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

wordpress вставить видео с youtube

Отпускаю в нужном месте и закрываю меню с блоками, чтобы не мешалось

wordpress вставить видео с youtube

В самом блоке есть три ссылки-способа вставки видео на сайт:

  • Загрузить — возможность загрузки видео с компьютера напрямую, в этом случае ролик будет занимать место, не вижу необходимости перегружать хостинг лишними файлами
  • Библиотека файлов — можно вставить видео из уже ранее загруженных, если таковые имеются
  • Вставить с сайта — вот эта ссылочка мне и нужна, чтобы не перегружать сайт использую бесплатный видеохостинг Ютуб

Жму “Вставить с сайта” — открывается небольшое окошко для вставки ссылки на видео

wordpress вставить видео с youtube

как вставить видео на сайт вордпресс

Иду к видео на Youtube. Как и в предыдущем случае вставки html под роликом нажимаю “Поделиться” и в окне, ставлю галочку “начало”, если нужно подкорректировать время начала воспроизведения. Затем копирую ссылку, нажав на специальную кнопку

как вставить видео на сайт вордпресс

Возвращаюсь в редактор на Вордпресс, вставляю ссылку в поле блока и напротив нажимаю значок с закругленной стрелкой — “Применить”

как вставить видео на сайт вордпресс

Жму “Просмотреть”, выпадает меню, где стоит галочка напротив “Настольный ПК”, кликаю на “Предпросмотр в новой вкладке”. Вижу, видео отображается на сайте

как вставить видео на сайт вордпресс

YouTube URL — аналог блока “Видео”. Вставляется по аналогии, как и предыдущих вариантах. В области блоков спускаюсь до раздела “Вставки” и нахожу “YouTube”. Добавляю его в редактор статей

как вставить видео на сайт вордпресс

 

В специальное поле, где написано “Укажите URL для вставки” вставляю ссылку на нужное видео и жму “Вставить”

как вставить видео на сайт вордпресс

Проверяю, как выглядит в статье нажатием ссылки “Просмотреть”.

Как вставить видео в статью в классическом редакторе

В классике можно добавить видео двумя способами:

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

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

как вставить видео на сайт вордпресс

В это место вставляю ссылку на видео из Ютуб

как вставить видео на сайт вордпресс

И она автоматически преобразуется в видеофайл

как вставить видео на сайт вордпресс

Вставляю html файл. Где его брать уже показывал выше по тексту. 

Как и в предыдущем варианте ставлю курсор, в нужном месте посередине

как вставить видео на сайт вордпресс

 

Пишу — ССЫЛКА ДЛЯ ВИДЕО

как вставить видео на сайт вордпресс

В верхнем меню над редактором жму на три точки и выбираю пункт “Редактировать как HTML

как вставить видео на сайт вордпресс

Нахожу свою надпись — ССЫЛКА ДЛЯ ВИДЕО, обвожу ее курсором мыши и вставлю код видео html 

как вставить видео на сайт вордпресс

как вставить видео на сайт вордпресс

Перехожу в визуальный редактор, жму на три точки сверху слева и выбираю “Редактировать визуально”

как вставить видео на сайт вордпресс

Вот так выглядит видео в редакторе:

как вставить видео на сайт вордпресс

В режиме просмотра, в статье:

как вставить видео на сайт вордпресс

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

как вставить видео на сайт вордпресс

Меняю их на значения, к примеру 700 на 450

как вставить видео на сайт вордпресс

Возвращаюсь к визуальному редактору, вижу, размер видео изменился

как вставить видео на сайт вордпресс

Теперь сравним оба варианта в режиме “Просмотреть”

Было:

как вставить видео на сайт вордпресс

 

Стало: 

как вставить видео на сайт вордпресс

Да, вижу разницу. Во втором варианте видео изменилось, стало побольше размерами.

Примечание от автора

В процессе написания статьи у меня всплыл косяк. При добавлении ссылки на видео в блоках “Видео” и “YouTube”, в режиме “Просмотреть” обнаружился такой нюанс — большой пробел между текстом и видео

как вставить видео на сайт вордпресс

Сразу даже и не понял в чем проблема. Оказалось все дело в одном из плагинов для адаптирования видео под мобильные устройства. Называется он FitVids for WordPress

То ли он с моей темой конфликтовать начал (использую бесплатную Bam), то ли еще что, но я этот плагин деактивировал и все встало на свои места.

А вот и обещанная видео инструкция )

Надеюсь, в данной инструкции мне удалось показать, как вставить видео с Youtube (Ютуб) в статью на сайте WordPress (Вордпресс). Если информация для вас оказалась рабочей, актуальной, дайте мне знать в комментариях к статье.

Туда же можете задавать вопросы и размещать конструктивную критику.

P.S. Хотите узнать, как создаются сайты для заработка на партнерках, правильно оптимизируются и выводятся в ТОП поиска, записывайтесь на бесплатное мероприятие от опытного наставника >>>

С уважением, Александр Егоров

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

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.