How to automatically open a lightbox popup on page load

This tutorial will guide you how to automatically open a lightbox popup on page load. You can display image, webpage, PDF document, YouTube, Vimeo or HTML5 video in the lightbox popup.

There are three steps in the tutorial:

  • Step 1 - Install Wonder Lightbox
  • Step 2 - Get the URL of the image file, PDF document, HTML video file, YouTube or Vimeo embed URL
  • Step 3 - Add HTML code to the WordPress page to create an auto popup

In step three we will learn how to add the HTML code to WordPress classic editor, Gutenberg editor and Elegant Themes Divi page builder.

We will also discuss how to popup the lightbox only once and how to autoplay YouTube, Vimeo and HTML5 videos on lightbox popup and close the lightbox automatically when the video ends.

  • Additional 1 - Autoplay YouTube, Vimeo and HTML5 video and close the lightbox automatically when the video ends
  • Additional 2 - Popup the lightbox only once

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