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

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

Визуальный редактор WordPress

Если вы пользуетесь визуальным редактором (который обычно активирован по умолчанию) в движке, то здесь всё очень просто. Я буду вставлять видео из YouTube в одну из будущих статей. Разберём на скриншотах.

Добавляем новый абзац, куда будем добавлять видео:

Добавляем параграф для видео

Вводим символ / (правый слеш на клавиатуре), чтобы вызвать меню команд и выбираем в нём YouTube.

Находим виджет YouTube

Появится виджет YouTube для вставки видео. Достаточно будет просто вставить ссылку на ваше видео из адресной строки и нажать кнопку «Вставить».

Вставляем ссылку из YouTube в новый виджет

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

Результат добавления видео

Сделать это можно и другим способом, если нажать на «плюс» в панели инструментов редактора, который при нажатии откроет блок и в нём аналогичным образом надо найти виджет YouTube. Здесь никаких различий не будет, выберите удобный вам способ.

Используем кнопку из панели инструментов

Режим редактора кода

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

Вот где находится опция режима редактора текста в WordPress:

Переходим в редактор кода

Дальше нам надо зайти в видео, которое мы хотим вставить из YouTube и найти кнопку Share или Поделиться:

Читайте также:  Удаление изображения в WordPress
Находим кнопку "Поделиться" под видео

Появится всплывающее окно с вариантами. Нас интересует самый левый элемент с иконкой кода. Вот как он выглядит:

Выбираем кнопку "Embed" для копирования кода

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

Копируем код видео YouTube

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

Дополнительные свойства кода

Теперь мы можем скопировать код из окна в буфер обмена (Ctrl+C для Windows или Cmd+C для macOS) и вернуться в редактор WordPress.

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

Вставляем код видео в редактор WordPress

При нажатии на кнопку «Выйти из редактора кода» вы увидите добавленное видео в вашу запись или страницу.

Выходим из редактора кода
Результат добавления видео

Если вдруг видео отображается в неправильных пропорциях, в том же режиме редактора кода вы можете изменить значения width и height (ширина и высота) для вашего видео, чтобы оно отлично вписалось в ваш экран.

Изменяем размер видео

Заключение

Мы рассмотрели два популярных способа вставки видео из YouTube в сайт на WordPress. Конечно же, есть вариант с использованием плагина, но смысла в них нет, т.к. эти двух способов вам хватит на всю жизнь! 😉

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

  1. Михаил

    У меня, к сожалению, после обновления вордпресса до Гутенберга и активации плагина Classic Editor перестал работать первый способ. Ссылка не ковертируется в плеер.

    Ответить
    • Александр Кадыров

      Приветствую, Михаил! Только что проверил на демонстрационном стенде, WP последней версии, установлен Classic Editor и ссылка в визуальном режиме успешно конвертируется в плеер. Могу предложить глянуть на вашем сайте и разобраться, в чём может быть проблема.

      Ответить
      • Кадыр-Оол

        Тоже не работает этот способ.
        WP 6.0, все обновления….

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

    Удается с ютуба напрямую через их код, меняю лишь параметры на 100% ширину и высоту. так надежнее.

    Ответить
  3. Detyr

    А как задать время? Если нужен только фрагмент видео, например с 5 минуты по 6?

    Ответить
  4. Григорий

    Фигня выходит, не работает в вордпресс прапорциональное растягивание, ни так [embed width="100%" height="auto"]https://youtu.be/oiP5cW3fuwE[/embed]
    Ни так

    Ответить
  5. Ольга

    Александр, а как быть с моб.версией и размером? И как вставить сразу несколько видео, чтобы они были в строчку, например, три штуки?

    Ответить

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *