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 ").
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=0" width="640" height="480" anchor="Une simple vidéo" description="Par Dr WP"]
For a similar result
You can view a thumbnail as shown above with a code similar to this one.
[video_lightbox_youtube video_id="YzqKMmQ_3Sg&rel=0" width="640" height="480" auto_thumb="1" description="Par Dr WP"]
For a result identical to this one
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
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.
Download | Demo | 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.
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.
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.
- Elementor: How to open popup from URL or menu
- How to demote a version of a WordPress plugin
- How to find a sponsor and monetize your blog? : Guide
- How to customize the WordPress dashboard for a client
- How to create a responsive menu for mobile WordPress
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.
...
Hello,
I am looking for a way to display a video popup after a click of a button. Is it possible to do that with WP Video Lightbox?
We look forward to seeing you!
Sincerely,
Hello,
Yes in principle.
I had forgotten
thank you
Hello and congratulations for the tutorial.
is it possible to enlarge the video thumbnail when i use "auto_thumb"?
In principle "auto_thumb" uses a predefined image with fixed sizes.
Hello,
Thank you very much for this well-constructed tutorial, I wanted to know if it was possible to add videos from other platforms other than You Tube and Vimeo (Openload example) or if there would be a limit.
Yours
Hello,
Yes in principle. We haven't tested yet.