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

вставляем ролики в статьи с разных хостингов

Начальные знания

21.10.2019

6.6k.

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

Содержание

1. Вставить через прямые ссылки
2. Добавить iframe в WordPress для видео на сайте
3. Как разместить видео на блоге с плагином ARVE
4. Устаревший тег embed
5. Видео формат через компьютер (без ссылок на ютуб)

Вставить через прямые ссылки

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

Копируем адрес

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

Записываем URL

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

Иконки социальных сетей

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

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

Персональный раздел YouTube

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

Добавить iframe в WordPress для видео на сайте

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

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

Экспорт ссылок в ВК

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

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

Кода в режиме текст

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

Генерация видео

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

HTML

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

Просмотр в гутенберге

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

Поделится

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

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

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

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

Кнопка ARVE

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

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

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

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

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

[ embed ]URL скопированная с ютуба[ /embed ]

Видео формат через компьютер (без ссылок на ютуб)

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

• Сокращает пространство
• Тормозит сайт
• Форматы поддерживаются только в mp4 расширении
• Большие файлы нельзя загрузить

Если не переубедил, то движемся дальше. Нажимаем на кнопку Добавить Медиафайл.

Кнопка Добавить медиафайл

При работе в Gutenberg находим плюс, в разделе основные выбираем блок Видео, остальные шаги одинаковые.

Блок video в гутенберге

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

Копирование объекта с компьютера

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

Выделение и добавление

Если процесс прошел хорошо, то в предварительном просмотре увидим загруженное.

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

Представление на ресурсе

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

Пожалуйста, оцените материал:

Валентин

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

Блок видео — Поддержка

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

Эта функция доступна для сайтов с тарифными планами WordPress.com Premium, Business и eCommerce. Если на вашем сайте действует один из устаревших тарифных планов, этот раздел доступен для плана Pro.

Если вы не хотите переходить на платный план, можно загрузить видеофайл в бесплатный сервис (например, YouTube) и вставить его на сайт.

Содержание

Блок видео в действии.

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

Добавление видеофайла

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

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

Ссылки на внешние службы, добавленные в блок видео, будут преобразованы в соответствующие блоки.

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

↑ Содержание ↑

Интерфейс блока

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

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

↑ Содержание ↑

Выравнивание

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

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

↑ Содержание ↑

Редактировать

Функция редактирования на панели инструментов блока видео позволяет выбрать новый видеофайл. Используйте её, если хотите заменить видеофайл в блоке видео.

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

↑ Содержание ↑

Настройки на боковой панели

В дополнение к настройкам на панели инструментов для каждого блока имеются свои настройки на боковой панели редактора. Если вы не видите боковую панель, нажмите значок шестерёнки рядом с кнопкой «Опубликовать».

Настройки блока доступны на боковой панели.

Для блока видео доступны следующие параметры.

Автовоспроизведение — видео воспроизводится автоматически при загрузке страницы (только если это поддерживается браузером). Некоторые современные браузеры блокируют эту функцию.

Повтор — после окончания видео воспроизводится заново с начала.

Без звука — видео воспроизводится без звука.

Элементы управления воспроизведением — читатель получает в своё распоряжение кнопку воспроизведения, функции управления громкостью, скоростью воспроизведения, а также выбора HD-качества и полноэкранного режима.

↑ Содержание ↑

Предварительная загрузка

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

• Ничего. Никакая часть видеофайла не загружается автоматически. Загрузка видеофайла начинается только после того, как посетитель нажмет кнопку воспроизведения. Эта настройка обеспечивает наиболее быструю загрузку страницы.
• Метаданные. Автоматически загрузятся только основные данные о файле. Как и с настройкой «Ничего», загрузка видеофайла начинается только после нажатия кнопки воспроизведения. Загрузка страницы с такой настройкой также происходит довольно быстро, поскольку загружается только текст. По существу, между настройками «Ничего» и «Метаданные» нет большой разницы.
• Автоматически. Загружается весь видеофайл, независимо от того, нажимает посетитель кнопку воспроизведения или нет. Этот вариант сильнее всего замедляет загрузку страницы или записи, особенно в случае больших видеофайлов.

↑ Содержание ↑

Постер

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

↑ Содержание ↑

Параметры загрузки

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

↑ Содержание ↑

Дополнительно

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

Раздел дополнительных настроек позволяет добавить к блоку класс CSS.

↑ Содержание ↑

VideoPress

VideoPress — это простой и быстрый проигрыватель, который позволяет размещать и вставлять видеофайлы на сайт и выполнять другие действия. Если загрузить видеофайл в блок видео или перетащить видеофайл в запись или на страницу, он автоматически размещается в VideoPress.

Дополнительные сведения см. в документации.

Разнообразие тарифных планов и ценовых предложений

• Бесплатно

  Оптимальный вариант для студентов

• Personal

  Оптимальный вариант для представления своего хобби

• Premium

  Оптимальный вариант для фрилансеров

• Business

  Оптимальный вариант для малых предприятий

Ваша оценка:

Блок видео

— Поддержка WordPress.

com

Блок видео позволяет загружать видеоконтент прямо в сообщение или на страницу.

Эта функция доступна на сайтах с нашими тарифными планами WordPress.com Premium, Business и электронной коммерции. Если у вашего сайта есть один из наших устаревших планов, он доступен в плане Pro.

Если вы не хотите обновляться, вы можете загрузить свое видео на бесплатную службу, такую ​​как YouTube, и встроить видео на свой сайт.

Содержание

Добавить видеоблок

Чтобы добавить видеоблок , нажмите значок + Блок   Inserter и выполните поиск по запросу «видео». Нажмите на нее, чтобы добавить блок к публикации или странице.

💡

Используя клавиатуру, вы также можете ввести /video в новой строке и нажать Enter, чтобы быстро добавить новый блок Video.

Добавление видеоблока

с помощью инструмента вставки косой черты

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

↑ Оглавление ↑

Добавить контент в блок

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

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

1. Загрузка: Нажмите, чтобы загрузить новое видео с вашего компьютера в блок видео .
2. Медиатека: Нажмите, чтобы выбрать одно из ранее загруженных видео в ваш  Медиатека .
3. Вставить из URL-адреса: Нажмите, чтобы вставить URL-адрес из поддерживаемого типа блока, например YouTube. Блок Video автоматически преобразуется в блок YouTube .

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

Вот пример того, как выглядит Видеоблок :

Пример Видеоблок

↑ Содержание ↑

Изменение размера блока видео

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

↑ Содержание ↑

Панель инструментов блока

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

Блок Видео имеет следующие параметры на панели инструментов:

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

📌

Если вы не видите возможность изменить ширину блока на широкую или полную ширину, и ваша тема поддерживает эти параметры, возможно, блок был добавлен в Групповой блок . Подробнее о блоке «Группа» можно узнать здесь.

↑ Содержание ↑

Настройки блока

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

Щелкните значок ⚙️, чтобы открыть настройки блока.

Автозапуск

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

Loop

Повторное воспроизведение видео с начала, как только оно закончится.

Без звука

Воспроизвести видео без звука.

Элементы управления воспроизведением

Предоставьте зрителю кнопку воспроизведения, регуляторы громкости, режим HD, скорость воспроизведения, режим «картинка в картинке» и полноэкранный режим.

Воспроизведение в режиме реального времени

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

Предварительная загрузка

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

• Нет: Видеофайл не загружается автоматически. Загрузка видеофайла начинается только тогда, когда посетитель нажимает кнопку «Воспроизвести». Это самая быстрая настройка.
• Метаданные : Автоматически загружается только основная информация о файле. Как и в случае с параметром None , загрузка видеофайла начинается только тогда, когда кто-то нажимает кнопку «Воспроизвести». Эта настройка также очень быстрая, так как загружается только текст. На фундаментальном уровне нет большой разницы между Нет и Метаданные .
• Авто: Загружается весь видеофайл, независимо от того, нажимает посетитель кнопку воспроизведения или нет. Это оказывает наибольшее влияние на скорость загрузки вашей страницы или публикации, особенно с большими видеофайлами.

Изображение постера

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

Цвета индикатора выполнения

Индикатор выполнения — это область в нижней части видео, которая показывает, какая часть видео была просмотрена и/или загружена.

Если вы включите параметр Match video , цвет индикатора выполнения будет адаптироваться к доминирующим цветам, используемым в самом видео, обеспечивая эстетическое удовольствие для зрителя.

Настройки видеофайла

Здесь вы можете выбрать:

• A  Рейтинг  для видео: Общий (G), PG-13 и Ограниченный (R).
• Разрешить загрузку:  Если этот параметр включен, зрители могут загружать видеофайл через меню общего доступа в видеопроигрывателе.
• Конфиденциальность видео:  Выберите, является ли видео общедоступным , частным или соответствует Site Default (настройка конфиденциальности вашего сайта в Settings → General ).

Дополнительно

На вкладке «Дополнительно» можно добавить к блоку класс CSS, что позволит вам написать пользовательский CSS для стилизации блока. Узнайте больше о добавлении дополнительных классов CSS в блоки.

Расширенный раздел позволяет добавить в блок класс CSS.

↑ Содержание ↑

VideoPress

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

Дополнительную информацию см. в этом руководстве.

Универсальные планы и цены

Как добавить видео в WordPress

Разнообразный и привлекательный контент является обязательным условием для вашего веб-сайта. Как только посетители попадают на ваш сайт, хороший контент побуждает их остаться и исследовать. Один из самых простых способов сделать это — добавить видео на свой сайт WordPress.

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

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

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

• Встраивание видео в WordPress
  • Встраивание видео в запись или на страницу
  • Встраивание видео в область виджета
• Загрузка видео в WordPress
  • Загрузка видео в медиатеку
  • Добавление видео в публикацию или страницу

Нет времени читать наше полное руководство? Посмотрите наше видео-прохождение.

Встраивание видео в WordPress

Встраивание — рекомендуемый вариант для добавления видео на ваш сайт WordPress. Загружая видео сначала на YouTube или Vimeo, а затем встраивая их через URL-адрес или код третьей стороны, вы можете использовать ресурсы их сервера вместо своих собственных.

Таким образом, вы защищаете скорость и производительность своего собственного веб-сайта, обеспечивая положительный пользовательский опыт для посетителей вашего сайта. Кроме того, серверы YouTube и Vimeo также специально разработаны для обслуживания высококачественного видеоконтента.

Встраивание видео — очень простой процесс. Ниже приведены инструкции о том, как встроить видео на ваш сайт WordPress с помощью стороннего.

Встраивание видео в публикацию или страницу

Перед выполнением описанных ниже действий необходимо сначала загрузить видео на YouTube или Vimeo.

1. Войдите в панель управления WordPress.
2. Перейти к страницам или сообщениям.
3. Редактировать существующую страницу или сообщение или создать новую страницу или сообщение.
4. Перейдите к блоку YouTube или Vimeo Gutenberg, нажав значок + в верхнем левом углу или на экране редактирования.
5. Выберите блокировку используемого вами стороннего видеосервиса. Для этого урока мы выбрали YouTube.
6. Скопируйте и вставьте URL-адрес YouTube для вашего видео в блок, затем нажмите Встроить .
7. Щелкните Опубликовать или Обновить , чтобы сохранить изменения.

Встраивание видео в область виджетов

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

1. Войдите в панель управления WordPress.
2. Перейдите к Внешний вид > Виджеты .
3. Прокрутите вниз, пока не увидите виджет Video , затем переместите его в область виджетов.
4. Добавьте название видео, затем нажмите Добавить видео .
5. Нажмите Вставьте с URL-адреса , скопируйте и вставьте URL-адрес видео YouTube или Vimeo в поле, затем нажмите Добавить в виджет .

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

6. Завершите задание, нажав Сохранить .

Загрузка видео в WordPress

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

В дополнение к тому, что видео потенциально использует слишком много ресурсов сервера, вы также упускаете преимущества размещения видео у стороннего поставщика. Например, если вы сначала загрузите свое видео на YouTube, у вас будет дополнительное преимущество: пользователи YouTube просматривают ваше видео и взаимодействуют с ним. YouTube также имеет простые возможности обмена, позволяя пользователям делиться вашим видео со своими сетями без особой суеты — то, что вы наверняка упустите, если загрузите видео прямо на свой веб-сайт.

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

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

Загрузка видео в медиатеку

1. Войдите в свою панель управления WordPress.
2. Перейдите к Медиа > Добавить новый .
3. Нажмите Выберите файлы , выберите видеофайл и нажмите Открыть . Вы также можете перетащить файл из папки File Explorer на вашем компьютере в область загрузки на панели управления WordPress.
4.  После загрузки видео в строке состояния отобразится 100 %.

Добавление видео в публикацию или на страницу

После того, как вы загрузили видео в свою медиатеку, вы можете добавить его в публикацию, страницу или область виджета (используйте приведенные выше инструкции по виджету), как если бы вы добавили изображение. Следуйте инструкциям ниже:

1. Войдите в панель управления WordPress.
2. Перейти к страницам или сообщениям.
3. Редактировать существующую страницу или сообщение или создать новую страницу или сообщение.
4. Перейдите к блоку Video Gutenberg, щелкнув знак + в верхнем левом углу или на экране редактирования.
5. В блоке видео нажмите Медиатека , выберите видео, которое вы только что загрузили, затем нажмите Выберите .