Привет! В этой инструкции покажу, как встроить видео с YouTube в статью на сайте WordPress.

Рассмотрим несколько вариантов встраивания видео:

• В блочном редакторе статей Вордпресс через блоки «YouTube» и «HTML-код».
• В классическом редакторе через html-код. Если вам, как и мне, пользоваться этим редактором удобнее и привычнее.

А также разберем нюанс с адаптацией видеоплеера на мобильных.

Для тех, кто предпочитает посмотреть видео, выкладываю инструкцию ниже:

А также размещаю текстовый вариант.

Перейдем в редактор статей в Вордпресс. Для этого в консоли сайта нажмем «Добавить» – «Запись», и у нас откроется этот самый редактор.

Как встроить видео с YouTube на сайт Wordpress?

Здесь нам предлагается ввести заголовок статьи и начать писать текст. Также при помощи иконки в виде плюсика мы можем добавлять различные блоки. В том числе блок с видео.

Как встроить видео с YouTube на сайт Wordpress?

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

Как встроить видео с YouTube на сайт Wordpress?

В появившемся меню выбираем раздел «Вставки» – «YouTube».

Как встроить видео с YouTube на сайт Wordpress?

Как встроить видео с YouTube на сайт Wordpress?

Указываем ссылку на видео с Ютуба, которое хотим встроить.

Как встроить видео с YouTube на сайт Wordpress?

Где ее взять? Можно скопировать в строке браузера, открыв страницу просмотра видео.

Как встроить видео с YouTube на сайт Wordpress?

А можно нажать под видео «Поделиться» и скопировать ссылку.

Как встроить видео с YouTube на сайт Wordpress?

Если вы хотите, чтобы видео в статье проигрывалось с определенного времени, то поставьте галочку «Начало» и укажите время.

Как встроить видео с YouTube на сайт Wordpress?

Скопированную ссылку добавьте в поле для встраивания URL в Вордпресс и нажмите «Вставить».

Как встроить видео с YouTube на сайт Wordpress?

Получаем плеер с видео в статье.

Как встроить видео с YouTube на сайт Wordpress?

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

Поэтому стоит рассмотреть второй вариант встраивания видео – через блок HTML-код.

Для этого удалим предыдущий блок с видео. Чтобы удалить тот или иной блок в статье, выделяем его левой кнопкой мыши, на появившейся панели жмем на троеточие – «Удалить блок».

Как встроить видео с YouTube на сайт Wordpress?

И выберем другой блок для встраивания. Жмем на иконку плюсика. Выбираем раздел «Форматирование» – HTML-код.

Как встроить видео с YouTube на сайт Wordpress?

Как встроить видео с YouTube на сайт Wordpress?

В появившуюся строку нам надо добавить код видео с Ютуба. Где его взять?

Как встроить видео с YouTube на сайт Wordpress?

На странице просмотра видео под проигрывателем нажимаем «Поделиться».

Как встроить видео с YouTube на сайт Wordpress?

Затем «Встроить»

Как встроить видео с YouTube на сайт Wordpress?

В открывшемся окне справа от ролика будет его код для встраивания на сайт.

Как встроить видео с YouTube на сайт Wordpress?

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

А в настройках ниже можно отключить показ панели управления видео.

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

Как встроить видео с YouTube на сайт Wordpress?

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

Как встроить видео с YouTube на сайт Wordpress?

Как встроить видео с YouTube на сайт Wordpress?

Теперь предлагаю рассмотреть еще один вариант встраивания видео в статью, в классическом варианте редактора. Здесь вставка также происходит через html-код.

В этом варианте еще до начала публикации текста статьи мы нажимаем на иконку плюсика, заходим в раздел «Форматирование» и выбираем блок «Классический».

Как встроить видео с YouTube на сайт Wordpress?

Как встроить видео с YouTube на сайт Wordpress?

Как встроить видео с YouTube на сайт Wordpress?

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

Как встроить видео с YouTube на сайт Wordpress?

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

Ставим курсор мыши внутрь классического блока. Затем нажимаем на троеточие на панели инструментов и выбираем «Редактировать как HTML».

Как встроить видео с YouTube на сайт Wordpress?

Копируем код встраивания видео с Ютуб (где его брать я показывала выше). И добавляем по тексту статьи в режиме кода.

Ставим курсор и делаем отступ клавишей Enter от строки, после которой хотим добавить видео. Добавляем скопированный код видео.

Как встроить видео с YouTube на сайт Wordpress?

Как встроить видео с YouTube на сайт Wordpress?

Чтобы посмотреть, что у нас получилось, снова переходим в визуальный режим. Жмем по троеточию – «Редактировать визуально».

Как встроить видео с YouTube на сайт Wordpress?

У вас может быть так, как у меня: из-за того что поле редактора узкое, видео обрезается. Однако в статье оно будет нормально отображаться.

Как встроить видео с YouTube на сайт Wordpress?

Может быть еще так, что при вставке кода видео встанет не по центру, чтобы его отцентрировать, используем теги:

<center>КОД ВИДЕО</center>

Первый тег ставим до начала кода видео, а второй после. Теги добавляем в режиме html-кода. Должно быть вот так:

Как встроить видео с YouTube на сайт Wordpress?

Чтобы посмотреть, как видео будет выглядеть в статье, нажмите сверху «Предпросмотр».

А чтобы опубликовать статью с видео, жмем по кнопке «Опубликовать».

Как встроить видео с YouTube на сайт Wordpress?

Как встроить видео с YouTube на сайт Wordpress?

Важный нюанс по адаптации видеоплеера на мобильных

Есть один маленький, но важный нюанс. Каким бы способом выше я не встраивала видео в статью – на мобильном плеер не адаптируется и обложка видео обрезается.

Как встроить видео с YouTube на сайт Wordpress?

Отображение на мобильном можно проверить с помощью сервиса responsinator.com

Какие есть решения?

1) Использовать специальный плагин для адаптации видео на мобильном. Плагин называется FitVids for WordPress. Мы находим его в официальном каталоге Вордпресс, устанавливаем и активируем.

Как встроить видео с YouTube на сайт Wordpress?

нажмите на скриншот для увеличения

Как встроить видео с YouTube на сайт Wordpress?

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

Как встроить видео с YouTube на сайт Wordpress?

Как встроить видео с YouTube на сайт Wordpress?

Единственное, если после активации плагина и проверки адаптивности, у вас ничего не изменится, тогда включите вот этот пункт «My theme is missing jQuery. Add jQuery 3.4.1 from Google CDN» (перевод: «В моей теме отсутствует jQuery. Добавить jQuery 3.4.1 из Google CDN»). И снова перепроверьте адаптивность.

Как встроить видео с YouTube на сайт Wordpress?

Как встроить видео с YouTube на сайт Wordpress?

2) Добавить специальный фрагмент кода в таблицу стилей вашей Вордпресс темы и заключить код для встраивания видео в специальный DIV блок.

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

.youtube {
position: relative;
padding-bottom: 56.25%; 
padding-top: 30px;
height: 0;
overflow: hidden;
}

.youtube iframe {
position: absolute;
top: 0;
left: 0;

}
@media screen and (max-width: 767px) {
.youtube iframe {
width: 100%;
height: 100%;
} 
}

Заходим в раздел «Внешний вид» – «Редактор тем» – открываем файл style.css:

Как встроить видео с YouTube на сайт Wordpress?

нажмите на скриншот для увеличения

Фрагмент кода добавляем в самый конец, сделав пробел. И сохраняем, нажав «Обновить файл».

Как встроить видео с YouTube на сайт Wordpress?

Теперь при встраивании видео с Ютуба его html-код надо заключить в блок DIV.

Вот эту часть:

<div class="youtube">

Вставляем до начала кода видео.

А вот эту добавляем после:

</div>

Должно получиться вот так:

Как встроить видео с YouTube на сайт Wordpress?

Важно: если один из способов у вас не работает, попробуйте второй.

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

1) Наличие видео в статье улучшает поведенческие факторы – человек дольше времени проводит на сайте, просматривая видео. А это плюс для поискового продвижения.

2) Для удобства ваших читателей – ведь кому-то удобнее прочитать статью, а кто-то предпочтет посмотреть наглядную инструкцию в видео. Поэтому рекомендую делать контент в двух форматах – текст и видео.

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

Благодарю вас за внимание!

Виктория