How to open a YouTube video in lightbox in Divi button module

Divi Builder is a drag and drop page builder by Elegant Themes. This tutorial will show you how to open a YouTube video in a lightbox popup when clicking a Divi button.

There are 4 steps in this tutorial:

  • Step 1 - Install Wonder Lightbox
  • Step 2 - Add a button in Divi builder
  • Step 3 - Activate lightbox on the button
  • Step 4 - Specify the size of the lightbox popup

Continue reading

Open a Vimeo video in a lightbox on page load

Product:

WonderPlugin Lightbox

Question:

I am trying to find a wordpress plugin that will allow me to have my Vimeo video pop up in a lightbox once the home page loads - automatically. Does your plugin do this?

Answer:

You can try our plugin WonderPlugin Lightbox.

You can view the following page for how to do it: https://www.wonderplugin.com/wordpress-lightbox/pop-up-a-vimeo-video-in-a-lightbox-on-page-load/

How to open an audio player in a WordPress lightbox popup

This tutorial will guide you how to open an audio player created with WonderPlugin Audio Player in a WordPress lightbox popup. We use the plugin WonderPlugin Carousel to create the carousel and the lightbox.
Continue reading

WordPress Lightbox and AJAX Loading

Product:

WonderPlugin Lightbox

Question:

I’m using my site a plugin that allows me to query the database and show results without requiring to code… I can also filter results based on search queries…

I’m using the lightbox in one page that uses such a filter/query. When I set my plugin to reload the entire page, it works fine (though pretty slow since there’s a lot of data), but if I filter using AJAX (i.e. the results are filtered without reloading the page), then the click event on the links that trigger the lightbox are removed… Therefore, after the first search/filter, the images are not clickable anymore…

Is there a way to prevent this (the click event from being removed)?

Answer:

After you use AJAx adding the data, you can call the following JavaScript to re-init the Lightbox:

jQuery(".wplightbox").wonderpluginlightbox();

Update:

If the issue is caused by Ajax loading of the WordPress theme, please view the following tutorial: WordPress lightbox and Ajax loading WordPress themes

How to add a poster image for HTML5 video lightbox?

Product:

WonderPlugin Lightbox

Question:

I wonder how can I add a poster image for HTML5 video lightbox?

Answer:

The HTML5 poster image feature is available in WonderPlugin Lightbox version 4.0 and above. If you are using an old version, please upgrade your plugin first.

In the plugin, Lightbox Options menu, there is an option "Video poster image (absolute URL)", you can use the option to specify a poster image for all HTML5 videos.

Or you can use a data tag data-html5videoposter to specify a poster image for the lightbox link, for example:

Video Lightbox

The HTML code is as following:

<a href="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-video0.mp4" class="wplightbox" data-webm="https://www.wonderplugin.com/wp-content/plugins/wonderplugin-lightbox/images/demo-video0.webm" data-html5videoposter="https://www.wonderplugin.com/wp-content/uploads/2014/03/gallery.jpg">Video Lightbox</a>