Product:

Wonder Lightbox

Tutorial:

By using the plugin Wonder Lightbox, you can easily open a video or image in a lightbox popup by simply adding a class name wplightbox to the <a> tag. For more information about how to activate the lightbox effect, you can view the help document Wonder Lightbox Help Document.

This tutorial will guide you how to add a play button over an image and use it to open a video lightbox.

The created demo is as follows:

This tutorial uses HTML code to create the lightbox effect. If you use Divi Visual Builder, you can view this tutorial: How to add a play button over an image and use it to open a video lightbox in Divi Builder.

To add a play button on top of an image, you can add the following HTML code to your web page. The HTML code adds a div container lightboxContainer around the image.

<a class="wplightbox" href="https://www.wonderplugin.com/wp-content/uploads/2020/08/WPcarousel.mp4">
<div class="lightboxContainer">
<img src="https://www.wonderplugin.com/wp-content/uploads/2016/11/unsplash-dog3.jpeg" alt="">
</div>
</a>

You can then add the following CSS code to your WordPress. If you don't know how to do that, you can go to your WordPress dashboard, the left menu Wonder Lightbox -> Lightbox Options, then go to the Advanced Options tab, add the code to the Custom CSS input box.

The CSS code adds the play button to the after selector of the div container lightboxContainer. You can download the play button image here Download Play Button Image, and make sure to change the play button URL to your own image URL.

.lightboxContainer {
  position:relative;
  display:inline-block;
}

.lightboxContainer:after {
  content:url("https://www.wonderplugin.com/download/playbutton.png");
  z-index:999;
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-32px;
  margin-top:-32px;
}

.lightboxContainer img {
  width: 320px;
}

The size of the play button in this tutorial is 64px by 64px, so the CSS code adds margin values margin-left:-32px; margin-top:-32px; to move the play button to the centre. If you use your own play button image and it has a different size, you need to change the values to the half of the play button width and height.

You can also change the CSS code to add a hover over effect. The opacity of the play button image will change from 0.8 to 1 on mouse over.

.lightboxContainer {
  position:relative;
  display:inline-block;
}

.lightboxContainer:after {
  content:url("https://www.wonderplugin.com/download/playbutton.png");
  z-index:999;
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-32px;
  margin-top:-32px;
  opacity:0.8;
}

.lightboxContainer:hover:after {
  opacity:1;
}

.lightboxContainer img {
  width: 320px;
}