Пропустить

Как открыть видео с YouTube во всплывающем окне на WordPress

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 600.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

Но знаете ли вы, что можно использовать его также для отображения видео на WordPress ? Нет?

Не беспокойтесь, в этом уроке я покажу вам, как разместить видео (Youtube - Vimeo и т. Д.) Dans Une лайтбокс.

Но раньше, если вы никогда не устанавливали WordPress, откройте для себя Как установить WordPress блог шаги 7 et Как найти, установить и активировать WordPress тему на своем блоге

Тогда вернемся к тому, почему мы здесь.

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

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

Le навигатор заряд ле изображений когда лайтбокс открывается, это также случай видео. Короче говоря, это особенность, которая позволит вашим страницам открываться быстрее, Это также позволит вам уменьшить размер (longueur) Вашей страницыпотому что часть содержимого этой страницы будет доступна в этом модальном окне.

Перемирие болтовни, давайте приступим к делу.

Как установить и настроить плагин WP Video Lightbox

WP Video Lightbox - это плагин доступно на WordPress.org. Это означает, что вы можете установить его прямо с панели управления WordPress, или скачать его как .zip-файл.

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

После активации плагинперейдите на страницу настроек из этого места Настройки >> Видео лайтбокс .

Мы сразу перейдем на вкладку prettyPhoto .

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

Для этого я объясню некоторые варианты (Обязательно)Так что это, как вы хотите.

Уже книжный магазин prettyPhoto должен быть активным (проверить « Включить prettyPhoto »). Чтобы пользователи могли знать, что они находятся на одной странице, вы сможете сделать окно прозрачным (определять значение от 0 до 1. Значения запятой принимаются).

Откройте для себя Характеристики эффективного всплывающего окна для WordPress

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

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

Для ширины и высоты лайтбоксВы можете редактировать поля по умолчанию ширина "И" по умолчанию высота .

Выбрать тему лайтбоксизменить выпадающее меню тема ». Также возможно активировать автоматическое чтение (поставьте галочку Autoplay »).

определить, в-regalges

Как отобразить лайтбокс в статье

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

Для просмотра видео В предложении были упомянуты такие социальные сети, как YouTube ou VimeoВы должны использовать шорткоды следующее:

[video_lightbox_youtube] (для YouTube)
[video_lightbox_vimeo5] (Для Vimeo)

Каждый из этих шорткоды принимает параметры, которые позволят вам:

  • Определить идентификатор (video_id) видео, обычно в этом формате YzqKMmQ_3Sg . Примеры [video_lightbox_youtub video_id = YzqKMmQ_3Sg "]
  • Установите высоту видео (высота)
  • Установите ширину видео (ширина)
  • Добавить описание (описание)
  • Добавить привязку HTML (якорь) или текст ссылки, которая откроет окно
  • Добавить эскиз (auto_thumb)

Если вы установите привязку HTML, миниатюра будет игнорироваться. В противном случае, auto_thumb принимает значение 1 .

Идите дальше, открыв также Как использовать и управлять Шорткоды WordPress

Демо использования

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

[video_lightbox_youtube video_id = "YzqKMmQ_3Sg & rel = 0"  ширина = "640"  высота = "480"  якорь = "один простое видео описание = "По Доктор В.П. "]

Для аналогичного результата

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

презентационного на достижение конкретных результатов

Вы можете просмотреть эскиз, как показано выше, с кодом, похожим на этот.

[video_lightbox_youtube video_id = "YzqKMmQ_3Sg & rel = 0"  ширина = "640"  высота = "480"  auto_thumb = "1"  описание = "По Доктор В.П. "]

Для результата, идентичного этому

миниатюрный Дюна-видео

Перед тем как покинуть

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

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

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

Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.

1. FileBird

Были ли у вас проблемы с управлением тысячами файлов изображений, видео или документов, которые вы загрузили на свой WordPress FTP? да или нет, в любом случае, важно знать, что плагин FileBird WordPress поможет вам с легкостью управлять вашими мультимедийными файлами и увеличит мощность вашей библиотеки.FileBird

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

Узнайте также наш Плагины 6 WordPress вдохнуть новую жизнь в ваши статьи

Кроме того, этот плагин полностью совместим с самыми популярными плагинами, особенно с WooCommerce, а также поддерживает большое количество языков. Так что, если вы хотите повысить эффективность управления вашей медиатекой, плагин FileBird WordPress может стать вашим секретным оружием.

скачать | Демонстрация | веб-хостинг

2. Социальный Share & Locker Pro

Расширение Social Share & Locker Pro было разработано, чтобы ваш сайт был более заметным в социальных сетях. Всего за несколько щелчков мыши вы можете либо установить положение значков социальных сетей, либо заблокировать контент, требуя публикации в одной из предложенных вами социальных сетей.

Плагин Social Share Locker Pro для WordPress

У вас есть шаблоны 10, которые должны соответствовать самым распространенным пожеланиям. Все модели совершенны и творят чудеса. Кроме того, с Social Share & Locker Pro вы сможете просматривать полное название социальных сетей или просто значок. Это будет зависеть от вашего дизайна, доступного пространства или ваших вкусов.

скачать | Демонстрация | веб-хостинг

3. Форма обратной связи 7 Подсказки

Это расширение WordPress для плагина Contact Form 7 предоставляет возможность легко добавлять всплывающие подсказки в ваш плагин Contact Form 7. Его всплывающие подсказки будут отображаться при пролете целевого элемента. На мобильных устройствах всплывающие подсказки указывают, когда выбран целевой элемент.Форма обратной связи 7 Подсказки

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [Рекомендуется]

скачать | Демонстрация | веб-хостинг

Другие рекомендуемые ресурсы

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

Заключение

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

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

А пока расскажите нам о своем Комментарии и предложения в специальном разделе.

...

Эта статья содержит комментарии 7

  1. Привет,
    Я ищу способ отображения всплывающего окна видео после нажатия кнопки. Можно ли сделать это с помощью WP Video Lightbox?

    спасибо,
    С уважением,

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

    возможно ли увеличить эскиз видео, когда я использую «auto_thumb»?

  3. Привет,
    Спасибо за этот учебник хорошо построен, я хотел бы знать, если это было возможно, чтобы добавить видео с других, отличных от YouTube и Vimeo (например, openload) платформ или если бы предел.

    ваш

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

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

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
7 акции
доля5
чирикать
Регистрация2