Искате ли да разберете как да отворите видеоклип в YouTube в изскачащ прозорец на WordPress?

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

Но знаехте ли, че може да се използва и за показване на видеоклипове на WordPress ? Не? 

Не се притеснявайте, в този урок ще ви покажа как да покажете видеоклип (YouTube - Vimeo - и др.) в a лайтбокс.

Но преди, ако никога не сте инсталирали WordPress открийте Как да инсталирате WordPress Блог в 7 Стъпки et Как да се намери, инсталиране и активиране на WordPress тема на вашия блог 

След това обратно към защо сме тук.

Причините, поради които трябва да използвате a лайтбокс за показване на вашите видеоклипове 

Les лайтбокс са модални прозорци; това, което може би не знаете, е, че не всички изображения, показани в тях, се зареждат по време на целия процес. "товарене" страница. 

Le Navigateur такса ле изображения когато лайтбокс Когато се отвори, същото важи и за видеоклиповете. Накратко, това е функция, която ще позволи на страниците ви да се отварят по-бързо, Освен това ще ви позволи да намалите размера (longueur) На страницата сизащото част от съдържанието на тази страница ще бъде достъпна в този модален прозорец.

Примирие от чат, нека да се пристъпим към бизнеса.

Как да инсталирате и конфигурирате плъгин WP видео лайтбокс

WP Video Lightbox е a плъгин налично на WordPress.org. Това означава, че можете да го инсталирате директно от таблото си за управление на WordPress или изтеглете го като файл .zip.

За повече подробности, Вижте нашето ръководство стъпка по стъпка за инсталиране на плъгин за WordPress.

След активиране на плъгин, отидете на страницата му с настройки от това местоположение “ настройки >> Видео лайтбокс ".

Ще отидем директно към „ prettyPhoto ".

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

За това ще обясня някои опции (Задължително)Така че това е, както желаете.

Вече книжарницата prettyPhoto трябва да се активира (провери « Разреши prettyPhoto »)За да уведомите потребителите, че са на една и съща страница, можете да направите прозореца прозрачен. (дефинира стойност от 0 до 1. Стойностите на запетаите се приемат).

Discover Характеристиките на ефективна изскачаща програма за WordPress 

Всичките ви лайтбокси могат да имат заглавие, което може да се показва (Покажи заглавие). Понякога за големи модални прозорци трябва да разрешите преоразмеряване (Позволете преоразмерите). А за по-дълги видеоклипове потребителите ще могат да ги уголемят (Позволете Разширете), По-добра визия.

За ширината и височината на лайтбокс, можете да редактирате полетата „ подразбиране Широчината "А" подразбиране височина ". 

За да изберете темата на лайтбокс, променете падащото меню тема Възможно е също да активирате автоматично възпроизвеждане. (поставете отметка в квадратчето " Autoplay »).

отворете видеоклип в Youtube в изскачащ прозорец - define-les-regalges

Как да се покаже a лайтбокс в една статия

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

FileBird

Случвало ли ви се е да се затруднявате да управлявате хиляди файлове с изображения, видеоклипове или документи, които сте качили на вашия FTP сървър на WordPress? Да или не, няма значение; важното е да знаете, че плъгинът FileBird за WordPress ще ви помогне да управлявате медийните си файлове с лекота и ще добави повече мощност към вашата библиотека.

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

Открийте и нашето 6 приставки за WordPress, за да вдъхнат нов живот на вашите статии

В допълнение, този плъгин е напълно съвместим с най-популярните плъгини, особено с WooCommerce, а също така поддържа голям брой езици. Така че, ако искате да подобрите управлението на медийната си библиотека, плъгинът FileBird за WordPress може да бъде вашето тайно оръжие.

Изтеглянедемонстрация уеб хостинг

2. Social Share & Locker Pro

Разширението Social Share & Locker Pro е създадено, за да помогне на вашия уебсайт да постигне по-голяма видимост в социалните медии. Само с няколко кликвания можете или да определите позицията на вашите социални икони, или да заключите съдържанието си, което изисква споделяне в една от избраните от вас социални мрежи.

Приставка за социален дял Locker Pro WordPress

Имате 10 шаблона, от които да избирате, които би трябвало да покриват повечето често срещани нужди. Всички тези шаблони са отлични и работят перфектно. Освен това, със Social Share & Locker Pro можете да показвате пълното име на социалните мрежи или само иконата. Това ще зависи от вашия дизайн, наличното пространство или личните предпочитания.

Изтегляне | демонстрация | уеб хостинг

3. Формуляр за контакт 7 подсказки

Това разширение на WordPress за плъгина Contact Form 7 добавя лесна функционалност за подсказки. Тези подсказки ще се появят, когато се задържи курсорът върху целевия елемент. На мобилни устройства подсказките показват кога се взаимодейства с целевия елемент.

Формуляр за връзка 7

Основните му характеристики са: лекота на използване, поддръжка за всички версии на Contact Form 7, персонализиране на цвета на фона на подсказката, поддръжка на HTML код, изцяло оформление отзивчиви и др.

Изтегляне | демонстрация | уеб хостинг

Други препоръчани ресурси

Също така ви каним да се консултирате с ресурсите по-долу, за да отидете по-далеч в управлението на вашия уебсайт и блог.

Заключение

Има! Това е всичко за този урок; надявам се, че ще ви помогне да показвате видеоклипове от YouTube или Vimeo в... лайтбокс на вашия уебсайт WordPress. Не се колебайте да споделяйте с приятелите си в любимите си социални мрежи

Ще можете обаче да се консултирате с нас грабене на ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress.

Но междувременно ни кажете за вашите Връзка и предложения в специалния раздел.

...