Product:
Tutorial:
This tutorial will guide you on how to open a video lightbox popup upon page load, play the video, and then automatically close the popup after the video has finished playing.
At the end of the tutorial, it will also discuss how to redirect to a URL when the lightbox closes.
To create the lightbox, follow these steps: if you are using the WordPress classic editor, go to your WordPress post or page editor and switch to Text mode. Enter the following code. Alternatively, if you are using a page editor like Elementor, add an HTML widget and insert the code.
<a href="https://www.wonderplugin.com/wp-content/uploads/2020/08/carousel.mp4" class="wplightbox" data-width=960 data-height=544 data-autoopen="true" data-autoopendelay=1000 data-autoclose="true" data-mutevideo="true" data-playsinline="true">Click to open an MP4 video in a Lightbox</a>
In the above code, the class name class="wplightbox" activates the lightbox on the link.
The data attributes data-width=960 and data-height=544 specify the size of the popup.
The data attribute data-autoopen="true" automatically opens the lightbox on page load. data-autoopendelay=1000 defines the open delay in milliseconds, and data-autoclose="true" closes the popup after the video has finished playing.
Video autoplay on page load is not allowed by web browsers unless the video is muted. The data attribute data-mutevideo="true" mutes the video so it can autoplay. To autoplay the video on mobile, the data attribute data-playsinline="true" must also be added.
If you want to hide the lightbox link, you can place the code inside a hidden div. For example:
<div style="display:none"> <a href="https://www.wonderplugin.com/wp-content/uploads/2020/08/carousel.mp4" class="wplightbox" data-width=960 data-height=544 data-autoopen="true" data-autoopendelay=1000 data-autoclose="true" data-mutevideo="true" data-playsinline="true">Click to open an MP4 video in a Lightbox</a> </div>
To view the online demo, please visit video popup and auto close demo.
If you want to change the text "Click to open an MP4 video in a Lightbox" to an image, you just need to replace it with an img tag:
<a href="https://www.wonderplugin.com/wp-content/uploads/2020/08/carousel.mp4" class="wplightbox" data-width=960 data-height=544 data-autoopen="true" data-autoopendelay=1000 data-autoclose="true" data-mutevideo="true" data-playsinline="true"> <img src="https://www.wonderplugin.com/wp-content/uploads/2020/07/wordpress-carousel-youtube.jpg" alt="Wonder Carousel"> </a>
In some cases, you may want to redirect the visitors to a URL when the lightbox closes. To achieve this, you can add the following data attributes to the code:
data-oncloseurl="https://www.wonderplugin.com" data-oncloseurltarget="_self"
The above code will open the specified URL in the same tab. If your page is inside an iframe, change the data-oncloseurltarget to _parent. If you want to open the URL in a new tab, you can change the data-oncloseurltarget to _blank:
data-oncloseurl="https://www.wonderplugin.com" data-oncloseurltarget="_blank"
