How to add a play button over an image and use it to open a video lightbox

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:

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.

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

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 {
  display:inline-block;
  position:relative;
  cursor:pointer;
}

.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;
}

.lightboxImg {
  width: 320px;
}

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

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

.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:80%;
}

.lightboxContainer:hover:after {
  opacity:100%;
}

.lightboxImg {
  width: 320px;
}