Хотите узнать, как открыть видео YouTube во всплывающем окне на WordPress?

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 

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

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

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

открыть видео Youtube во всплывающем окне - define-les-regalges

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

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

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

[video_lightbox_youtube] (pour YouTube)
[video_lightbox_vimeo5] (pour 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=0width="640height="480anchor="Une simple vidéo" description="Par Dr WP"]

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

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

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

[video_lightbox_youtube video_id="YzqKMmQ_3Sg&rel=0width="640height="480auto_thumb="1description="Par Dr WP"]

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

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

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

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

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

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

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

1. FileBird

ФайлПтица

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

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

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

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

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

2. Социальный обмен и 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 Подсказки

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

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

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

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

Заключение

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

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

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

...