Product:
Tutorial:
This tutorial will guide you how to open a video lightbox popup on page load, play the video then close the popup automatically after the video has finished playing.
Web browsers (Safari, Chrome and Firefox) recently changed their video playback policy. Video autoplay on page load also does not work on 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.
In your WordPress post or page editor, switch to Text mode, then enter the following 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 attribute data-width=960 and data-height=544 specify the size of the popup, data-autoopen="true" automatically opens the lightbox on page load, data-autoopendelay=1000 defines the open delay in milliseconds, data-autoclose="true" closes the popup after the video has finished playing.
If you want to hide the lightbox link, you can place the code into 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>
