Автор: 
Приветствую на страницах своего блога! Продолжаю делать инструкции из серии “Для блога Вордпресс”. Уж очень зашла мне эта тема )). Сегодня тема инструкции — Как вставить видео с Youtube (Ютуб) в статью на сайте WordPress (Вордпресс), в текстовом формате со скриншотами, а в завершение статьи вы найдете видео версию.
Есть несколько способов вставки видео в статью с ютуб на сайте вордпресс. У WordPress есть два редактора, для размещения статей, видео, картинок и прочего контента:
- Блочный редактор Gutenberg
- Классический редактор
Редакторы значительно отличаются своим функционалом.
В этой инструкции буду показывать, как вставить видео на примере обоих редакторов. Ведь кому-то нравится пользоваться Gutenberg, а кому классикой.
Сам использую классику, хотя считаю, блочный Гутенберг довольно удобным и вполне приемлемым. Но давайте по порядку и начну я с блочного.
ПРИМЕЧАНИЕ: По ходу написания статьи вылез один косяк, но о нем в конце инструктажа. Там же вы найдете видео-инструкцию по данной теме со всеми подробностями
Как вставить видео в статью в блочном редакторе
Заходим в админку сайта Вордпресс, как это сделать, смотрите здесь. Далее в левой колонке жмем “Записи” и “Добавить новую”
Возьму произвольный текст и вставлю его, добавлю заголовок. В блочном Гутенберге есть возможность вставить видео тремя способами:
- через блок вставки — Произвольный html
- через блок — Видео, где нужно вставить только ссылку на видео из Ютуб
- YouTube URL — аналог блока “Видео”
Блок вставки “Произвольный html”. Между строчками, где нужно вставить видео наводим курсор мыши и жмем на значок “+” и “Посмотреть все”
Слева открывается область, где расположены все блоки для вставки, прокручиваем вниз и в разделе “Виджеты” находим блок “Произвольный html”, жмем на него
и видим, в тексте появился новый блок, где написано “Пишите html”
Переходим в YouTube к тому видео, которое нужно вставить в статью на блоге Вордпресс. Под роликом нажимаем “Поделиться”
Экран затемняется и появляется окно, в котором жмем “Встроить”
Открылся код видео, который необходимо скопировать. Перед копированием можно сделать некоторые настройки:
- выставить время, с которого будет начинаться видео, например убрать вступление и приветствие, в статье ведь это уже есть, тут ставите галочку и меняете время на то, которое нужно
- можно также убрать галочку напротив “Показывать панель управления проигрывателем”, на мой взгляд лучше этого не делать, мне нравится, когда в просматриваемом видео есть возможность управлять видео роликом
Скопировали код, возвращаемся в текстовый редактор Вордпресс и в поле вставляем html правой кнопкой мыши, или сочетанием клавиш Ctrl+V
В редакторе блока нажимаем “просмотреть” и видим, как ужасно выглядит видео, но это нормально. В самом редакторе много чего ужасного выползает.
Нам же нужен порядок и комфорт в самой статье. Поэтому в правом верхнем углу жмем “Просмотреть”, чтобы увидеть, как это выглядит на блоге
В соседней вкладке открывается страница со статьей и видео в режиме просмотра, где видим, что все ОК, видео встроилось и отображается без косяков
Блок вставки “Видео”. В левом верхнем углу нажимаем на значок “+”, откроется область с блоками. Прокручиваем вниз и в разделе “Медиа” находим блок с названием “Видео”
Зажимаю нужный мне блок левой кнопкой мыши и тяну его в редактор текста в то место, где хочу разместить
Отпускаю в нужном месте и закрываю меню с блоками, чтобы не мешалось
В самом блоке есть три ссылки-способа вставки видео на сайт:
- Загрузить — возможность загрузки видео с компьютера напрямую, в этом случае ролик будет занимать место, не вижу необходимости перегружать хостинг лишними файлами
- Библиотека файлов — можно вставить видео из уже ранее загруженных, если таковые имеются
- Вставить с сайта — вот эта ссылочка мне и нужна, чтобы не перегружать сайт использую бесплатный видеохостинг Ютуб
Жму “Вставить с сайта” — открывается небольшое окошко для вставки ссылки на видео
Иду к видео на Youtube. Как и в предыдущем случае вставки html под роликом нажимаю “Поделиться” и в окне, ставлю галочку “начало”, если нужно подкорректировать время начала воспроизведения. Затем копирую ссылку, нажав на специальную кнопку
Возвращаюсь в редактор на Вордпресс, вставляю ссылку в поле блока и напротив нажимаю значок с закругленной стрелкой — “Применить”
Жму “Просмотреть”, выпадает меню, где стоит галочка напротив “Настольный ПК”, кликаю на “Предпросмотр в новой вкладке”. Вижу, видео отображается на сайте
YouTube URL — аналог блока “Видео”. Вставляется по аналогии, как и предыдущих вариантах. В области блоков спускаюсь до раздела “Вставки” и нахожу “YouTube”. Добавляю его в редактор статей
В специальное поле, где написано “Укажите URL для вставки” вставляю ссылку на нужное видео и жму “Вставить”
Проверяю, как выглядит в статье нажатием ссылки “Просмотреть”.
Как вставить видео в статью в классическом редакторе
В классике можно добавить видео двумя способами:
- Вставить ссылку на видео в нужном месте, она преобразуется в видеофайл (сам только недавно узнал об этом способе)
- Вставить html файл (более гибкие настройки)
Вставить ссылку на видео в нужном месте. В редакторе ставлю курсор, куда хочу добавить видео и делаю его по центру
В это место вставляю ссылку на видео из Ютуб
И она автоматически преобразуется в видеофайл
Вставляю html файл. Где его брать уже показывал выше по тексту.
Как и в предыдущем варианте ставлю курсор, в нужном месте посередине
Пишу — ССЫЛКА ДЛЯ ВИДЕО
В верхнем меню над редактором жму на три точки и выбираю пункт “Редактировать как HTML”
Нахожу свою надпись — ССЫЛКА ДЛЯ ВИДЕО, обвожу ее курсором мыши и вставлю код видео html
Перехожу в визуальный редактор, жму на три точки сверху слева и выбираю “Редактировать визуально”
Вот так выглядит видео в редакторе:
В режиме просмотра, в статье:
Хочу подкорректировать размер видео, сделать его побольше. Возвращаюсь в редактор html, где вставлял код для видео и нахожу размеры ролика
Меняю их на значения, к примеру 700 на 450
Возвращаюсь к визуальному редактору, вижу, размер видео изменился
Теперь сравним оба варианта в режиме “Просмотреть”
Было:
Стало:
Да, вижу разницу. Во втором варианте видео изменилось, стало побольше размерами.
Примечание от автора
В процессе написания статьи у меня всплыл косяк. При добавлении ссылки на видео в блоках “Видео” и “YouTube”, в режиме “Просмотреть” обнаружился такой нюанс — большой пробел между текстом и видео
Сразу даже и не понял в чем проблема. Оказалось все дело в одном из плагинов для адаптирования видео под мобильные устройства. Называется он FitVids for WordPress
То ли он с моей темой конфликтовать начал (использую бесплатную Bam), то ли еще что, но я этот плагин деактивировал и все встало на свои места.
А вот и обещанная видео инструкция )
Надеюсь, в данной инструкции мне удалось показать, как вставить видео с Youtube (Ютуб) в статью на сайте WordPress (Вордпресс). Если информация для вас оказалась рабочей, актуальной, дайте мне знать в комментариях к статье.
Туда же можете задавать вопросы и размещать конструктивную критику.
P.S. Хотите узнать, как создаются сайты для заработка на партнерках, правильно оптимизируются и выводятся в ТОП поиска, записывайтесь на бесплатное мероприятие от опытного наставника >>>
С уважением, Александр Егоров
