Want to find out how to open a YouTube video in a popup on WordPress?

La lightbox or modal window (pop up) is a very common feature on the net. However, it is generally used to display images, email capture forms, promotions or even registration forms. 

But did you know that it is also possible to use it to display videos on WordPress ? No ? 

No worries, in this tutorial I will show you how to display a video (YouTube – Vimeo – etc.) in a lightbox.

But before, if you have never installed WordPress discover How to Install a WordPress Blog in 7 Steps et How to search, install and activate a WordPress theme on your blog 

Then back to why we are here.

The reasons why you should use a lightbox to display your videos 

The lightbox are modal windows, however, what you don't know is that not all of the images displayed in them are all loaded during the « loading«  of the page. 

Le Sailor charge the images when the lightbox opens, this is also the case for videos. In short, it's a feature that will allow your pages to open faster. It will also allow you to reduce the size (length) Of your pagebecause part of the content of this page will be available in this modal window.

Truce of chatter, let's get down to business.

How to install and configure Plugin WP Video Lightbox

WP Video Lightbox is a Plugin available at WordPress.org. Which means you can install it right from your WordPress dashboard, or download it as a .zip file.

For more details, check out our step by step guide on how to install a WordPress plugin.

After activating the Plugin, go to its settings page from this location " Settings >> Video lightbox ».

We will go directly to the " prettyPhoto ».

In reality, this Plugin use another Plugin, which is intended primarily for displaying a photo gallery. But you can change some of the information that will be applied to videos.

For that, I'll explain some options (indispensable), So that everything happens the way you want.

Already the bookstore prettyPhoto must be activated (check " Enable prettyPhoto »)To let users know that they are on the same page, you can make the window transparent (to define a value from 0 to 1. Comma values ​​are accepted).

Discover The characteristics of an effective popup for WordPress 

All your lightboxes can have a title that can be displayed (Show title). Sometimes for large modal windows you need to allow resizing (Allow resize). And for longer videos, users will be able to enlarge them (Allow Expand), To better watch them.

For the width and height of the lightbox, you can edit the fields " default width " and " default height ». 

To choose the theme of the lightbox, change the drop-down menu Thème ". It is also possible to activate autoplay (Check the box " Autoplay ").

open a Youtube video in a popup - define-les-regalges

How to display a lightbox In an article

Le Plugin proposes a list of shortcodes that will allow you to display lightbox in articles. I forgot to tell you that you can also view the videos available on Vimeo.

To view a video YouTube ou Vimeoyou must use the shortcodes following :

[video_lightbox_youtube] (pour YouTube)
[video_lightbox_vimeo5] (pour Vimeo)

Each of these shortcodes accepts parameters, which will allow you to:

  • Define the identifier (video_id) of a video, usually in this format " YzqKMmQ_3Sg ». Example [video_lightbox_youtub video_id = "YzqKMmQ_3Sg"]
  • Set the height of the video (height)
  • Set the width of the video (width)
  • Add a description (Description)
  • Add an HTML anchor (anchor), or text of the link that will open the window
  • Add a thumbnail (auto_thumb)

If you set an HTML anchor, the thumbnail will be ignored. On the other hand, auto_thumb takes the value " 1 ».

Go further by discovering also How to use and manage shortcodes WordPress

Demo of a use

With what I just provided you with information, you can display a video using a code similar to this one:

[video_lightbox_youtube video_id="YzqKMmQ_3Sg&rel=0width="640height="480anchor="Une simple vidéo" description="Par Dr WP"]

For a similar result

presentation of the results

You can view a thumbnail as shown above with a code similar to this one.

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

For a result identical to this one

mini-dune-video

Before we leave

It should be noted that some parameters in the shortcodes will overwrite those defined in the settings.

Discover also some premium WordPress plugins  

You can use other WordPress plugins to give a modern appearance and to optimize the handling of your blog or website.

We offer you here some premium WordPress plugins that will help you do that.

1. FileBird

FileBird

Have you ever struggled to manage thousands of image, video or document files you uploaded to your WordPress FTP? yes or no, it doesn't matter, the important thing is to know that the WordPress Plugin FileBird will help you manage your media files with ease and bring more power to your library.

Its seamless user interface and context menu allow users to drag and drop files into folders or have the necessary rights to quickly create, rename or delete folders in the same way as you do on your computer. With this plugin in hand, your media files will be systematically organized and you can easily select an image to insert into a page or publish it.

Discover also our 6 WordPress plugins to breathe new life into your articles

In addition, this plugin is fully compatible with the most popular plugins, especially with WooCommerce, and also supports a large number of languages. So if you want to give your media library management a boost, the WordPress Plugin FileBird could be your secret weapon.

DownloadDemo Web hosting

2. Social Share & Locker Pro

The Social Share & Locker Pro extension has been designed to help your website be more visible on social networks. With just a few clicks, you can either set the position of your social icons or lock your content by requiring sharing on one of the social networks offered by you.

Social Share Locker Pro WordPress Plugin

You have 10 templates that should cover the most common wishes. All of its models are perfect and work wonderfully. In addition, with Social Share & Locker Pro, you will be able to display the full name of social networks or just the icon. It will depend on your design, the space available, or your taste.

Download | Demo | Web hosting

3. Contact Form 7 Tooltips

This WordPress extension of the Contact Form 7 plugin brings an easy tooltip functionality to your Contact Form 7 plugin. Its tooltips will display when the target element is hovered over. On mobile devices, tooltips indicate when the target element is engaged.

Contact Form 7 Tooltips

Its main features are: ease of use, support for all versions of Contact Form 7, customization of tooltip background color, support for HTML code, fully layout responsive, and more.

Download | Demo | Web hosting

Other recommended resources

We also invite you to consult the resources below to go further in the grip and control of your website and blog.

Conclusion

Here! That's it for this tutorial, hope it helps you to display Youtube or Vimeo videos in a lightbox on your WordPress website. Feel free to share with your friends on your favorite social networks

However, you will also be able to consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation.

But, in the meantime, tell us about your Comments and suggestions in the dedicated section.

...