Просто вставить видео на сайт WordPress с помощью функций движка и плагина

Прогресс идет вперед и не всегда текстовый формат помогает понять тему, легче и быстрее записать ролик. Загрузить на youtube легко, но как потом вставить видео на сайт WordPress вот проблема. Статья полностью ответит на данный вопрос и даст простые и пошаговые инструкции.

Прямая вставка ссылки

После загрузки файла на любой из популярных хостингов видео, например Vimeo, Youtube и Tumblr можно воспользоваться прямой ссылкой на видео из браузера. Идем на страницу, где проигрывается ролик и копируем url.

Копирование адреса страницы
Копируем адрес

Переходим в создание статьи или записи и во вкладке Визуально (старого редактора), или в поле абзац в (Gutenberg), вставляем ссылку и она автоматически преобразуется в экран просмотра.

WordPress обработал и выдал видео на экран
Вставляем URL

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

Блоки gutenberg
Иконки социальных сетей
  • Нажимаем на плюс
  • Находим раздел вставка
  • Ищем тот сервис или социальную сеть откуда нужно вставить ролик на сайт WordPress

Появится блок WordPress куда заносим ссылку и нажимаем кнопку вставить.

Специальный блок youtube в WordPress
Персональный блок YouTube

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

Тег iframe в WordPress выведет видео на сайте

Универсальный метод, каждый уважающий себя сервис, дающий возможность добавить видео на сервер, заботиться чтобы его могли порекомендовать и вставить на любой из сайтов, для этого используется тег iframe.

Одним из таких является социальная сеть Вконтакте, WordPress не воспринимает ссылки вставленные оттуда и блока с ВК в редакторе нет. Открываем видео на сайте ВК и смотрим инструкцию.

Экспорт роликов в ВК
Экспорт ссылок в ВК
  1. Жмем на стрелочку
  2. Переходим во вкладку Экспортировать
  3. Копируем код
  4. Если нужно, то перед копированием настраиваем величину

Переходим на сайт, в старом редакторе вставляем код во вкладке текст.

Запись iframe в вкладку текст
Вставка кода в режиме текст

Код в WordPress обработался, в Визуально увидим сформированное видео.

Мгновенна загрузка видео в редакторе WP
Генерация видео

Если работаем в Gutenberg, ставим блок HTML-код.

Блок html
HTML блоки

В него вставляем iframe конфигурацию, можно нажать Посмотреть, WordPress обработает и добавить видео на экран.

Режим просмотра HTML кода
Просмотр в гутенберге

Данная возможность на YouTube находится под видео. Настраиваем отображение и копируем HTML.

Кнопка поделится на youtube
Поделится на Youtube

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

Как вставить видео на блоге с плагином ARVE

Плагин ARVE добавляет удобство использования и более гибкой настройки показа видео на экран, находится в официальном репозитории здесь.

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

Кнопка плагина ARVE
Кнопка ARVE

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

  • Задать миниатюру
  • Выровнять по центру (что бывает проблематично)
  • Задать продолжительность
  • Сделать автозапуск
  • Задать ширину и высоту
  • Управление звуком
  • Авто реплей

Плагин переведен на русский язык и не требует разбора. Пользуйтесь если вас не устраивает стандартный функционал WP.

Устаревший тег embed

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

[ embed ]URL скопированная с YouTube[ /embed ]

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

Получай полезные материалы удобным способом!
Добавить комментарий

Ntrcn