Divi: The best WordPress theme of all time!
With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates.
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).
Easily create your website with Elementor
Elementor lets you create Easily and Free any website or blog design with a professional look. Stop paying a lot for a website you can do yourself.
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] (for YouTube)
[video_lightbox_vimeo5] (For 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 ». Examples [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 = "One simple video " description = "By Dr. WP "]
Do you want to sell your products on the internet?
Download WooCommerce for free, the best e-commerce plugins to sell your physical and digital products on WordPress and easily create your online store. Perfect for beginners.
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 = "By 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 look and optimize the grip of your blog or website.
We offer you here some premium WordPress plugins that will help you do that.
Have you ever struggled to manage thousands of image, video, or document files that you uploaded to your WordPress FTP? yes or no, whatever, the important thing is to know that the WordPress FileBird plugin 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 a boost to the management of your media library, the FileBird WordPress plugin could be your secret weapon.
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.
3. Contact Form 7 Tooltips
This WordPress extension of the Contact Form 7 plugin brings a feature of easily adding tooltips to your Contact Form 7 plugin. Its tooltips will be displayed when the target element is hovered. On mobile devices, tooltips indicate when the target item 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.
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.
- 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
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 the tip with your friends on your social networks.
But, in the meantime, tell us about your Comments and suggestions in the dedicated section.