Skip to Main Content

How to open a Youtube video in a popup on WordPress

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 701.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. [Recommended]

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 les 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 active (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 allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

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] (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 = 0width = "640height = "480anchor = "One simple video " description = "By Dr. WP "]

For a similar result

presentation of the results

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

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 = "By 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 look and optimize the grip 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 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.FileBird

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.

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 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.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.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

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 the tip with your friends on your 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.

...

This article features 7 comments

  1. 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?

    thank you,
    cordialement,

  2. 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

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
7 shares
Share5
tweet
Save2