simple svg play button with circle overlay

HTML

<div class="custom-video-lightbox">
  <a href="https://www.youtube.com/watch?v=EI18oB4-i8M" class="glightbox video-trigger">
    <img src="https://img.youtube.com/vi/EI18oB4-i8M/hqdefault.jpg" alt="Watch our video">
    <div class="play-button-overlay">
      <svg viewBox="0 0 24 24" fill="white" width="64" height="64"><path d="M8 5v14l11-7z"/></svg>
    </div>
  </a>
</div>

CSS

/* Custom Video Lightbox Wrapper */
.custom-video-lightbox {
  position: relative;
  width: 100%;
  max-width: 100%; /* Adjust if you want the video thumbnail smaller */
  overflow: hidden;
  border-radius: 8px; /* Optional: rounds the corners of the thumbnail */
  cursor: pointer;
}

.custom-video-lightbox img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease; /* Smooth zoom effect on hover */
}

/* Play Button Overlay Positioning */
.custom-video-lightbox .play-button-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

/* Hover Effects */
.custom-video-lightbox:hover img {
  transform: scale(1.02);
}

.custom-video-lightbox:hover .play-button-overlay {
  background: rgba(46, 96, 70, 0.9); /* Changes play button background to your green */
}

Scripts

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />

<script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const lightbox = GLightbox({
      selector: '.glightbox', // Targets the class in our HTML
      touchNavigation: true,
      loop: false,
      autoplayVideos: true // Autoplays the video once the lightbox opens
    });
  });
</script>