Как создать адаптивный слайдер для видео на YouTube

Опубликовано: 2020-04-06

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

Эта статья содержит полные пошаговые инструкции по созданию адаптивного слайдера для видео YouTube на веб-сайте WordPress. Я покажу лучший и самый простой способ его создания, чтобы вам не нужно было иметь какие-либо навыки кодирования для создания полного слайдера видео YouTube на вашем собственном веб-сайте WordPress.

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

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

Отзывчивый слайдер видео YouTube
Отзывчивый слайдер видео YouTube

Если мы хотим создать слайдер для видео на YouTube с помощью плагина WordPress Carousel Pro , нам нужно выполнить 3 шага.

Шаг 1: Установка и активация плагина WordPress Carousel Pro

Шаг 2: добавьте новую карусель видео на Youtube

Шаг 3. Отобразите видеокарусель Youtube на сайте WordPress.

Шаг 1. Установка и активация плагина WordPress Carousel Pro

Во-первых, мы должны установить и активировать плагин WordPress Carousel Pro, чтобы приступить к созданию слайдера видео WordPress для YouTube. Установка и активация любых плагинов WordPress одинаковы для всех. Однако, если вам нужны какие-либо рекомендации, вы можете следовать этой инструкции по установке и активации .

Карусель WordPress Pro

Шаг 2: добавьте новую карусель видео на Youtube

У меня вы успешно завершили установку и активацию плагина. Теперь пришло время создать нашу первую видео-карусель на YouTube. Это действительно очень быстрый и простой процесс. Однако, как только вы закончите активацию, вы найдете меню WP Carousel Pro в меню панели инструментов WordPress. Теперь нажмите на меню « Добавить новое », откроется интерфейс с несколькими полями. Теперь заполните поля вашим контентом. В этом случае следуйте инструкциям шаг за шагом.

(i) Название карусели: введите в этом поле название карусели видео на YouTube.

(ii) Тип карусели. Вы можете создавать многоцелевые карусели с помощью плагина WordPress Carousel Pro. Поскольку мы хотим создать слайдер для видео на YouTube, просто выберите тип карусели видео.

Выберите тип карусели: видео

(iii) Добавить видео: выбрав тип видеокарусели, вы найдете кнопку для добавления видео. Итак, нажмите кнопку « Добавить видео» . Следовательно, он откроет интерфейс со следующими полями ввода.

Поле видеовхода

Вы можете видеть, что есть возможность выбора источника видео. Вы можете выбрать видео из разных источников. Поскольку мы хотим создать слайдер для видео на YouTube, мы должны выбрать Youtube в качестве источника видео. Он выглядит следующим образом.

Выберите: Источник видео

Более того, на этом этапе нам нужно ввести идентификатор видео, которое мы хотим добавить в вашу видео-карусель на YouTube. По этой причине перейдите по ссылке на конкретное видео, соберите идентификатор и установите идентификатор в поле « Идентификатор видео» . Он выглядит следующим образом.

Дайте идентификатор видео

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

(iv) Настройка карусели: плагин имеет широкие возможности настройки. Вы можете настроить любое поле в соответствии с вашими потребностями.

(v) Публикация: после того, как вы закончите настройку, она будет полностью готова к публикации карусели видео на YouTube. Теперь нажмите кнопку « Опубликовать » , чтобы опубликовать его.

Шаг 3: Отобразите карусель видео Youtube

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

Сгенерированный шорткод

Редактор Гутенберга

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

Редактор Гутенберга

Классический редактор

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

Классический редактор

Я скопировал шорткод и вставил его на страницу и, наконец, нашел следующий результат на своем веб-сайте WordPress.

Ютуб видео карусель слайдер

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

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

Название видео

Теперь перейдите на вкладку « НАСТРОЙКИ СТИЛЯ » и прокрутите вниз до параметра « Показать и скрыть описание ». Итак, просто включите опцию, чтобы показать содержимое. Вы можете следить за скриншотом ниже.

Описание видео Включить

Как только вы закончили этот шаг, теперь посмотрите на результат. Я сделал это и получил следующий результат.

Видео-карусель Youtube с заголовком

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

описание видео

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

Видео-карусель YouTube с заголовком и описанием

Кроме того, вы также можете настроить цвет значка видео. Если вы заинтересованы в настройке цвета значка видео, вам нужно щелкнуть вкладку НАСТРОЙКА СТИЛЯ и перейти к параметру Цвет значка видео. Однако это будет выглядеть следующим образом:

Настройка цвета значка видео

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

Цвет значка видео на выходе

Заключительные слова

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