Code snippets for a video lightbox with image thumbnail.

custom-style.css

.lightbox-video {
  margin: auto;
  padding: 5% 10%;
}

.lightbox-video a {
  display: block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.lightbox-video a:after {
  content: "";
  position: absolute;
  display: inline-block;
  vertical-align: top;
  clip: inherit;
  background: url("images/icon-video-play.svg") no-repeat center center;
  background-size: cover;
  /*left: 90%;
  top: 78%;*/
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  stroke: none;
  height: 80px;
  width: 80px;
  z-index: 100;
  opacity: 0.4;
  transition: opacity .3s;
}
@media only screen and (min-width: 800px) {
  .lightbox-video a:after {
    height: 120px;
    width: 120px;
  }
}

.lightbox-video [data-featherlight] img {
  cursor: pointer;
  position: relative;
}

.lightbox-video:hover a:after {
  opacity: 0.8;
}

global.js

;
(function($) {
  'use strict';

  var imageLinks = [
    '.lightbox-video a.widget_sp_image-image-link'

  ];

  $.each(imageLinks, function(index, value) {
    $(value).attr({
      'data-featherlight': 'iframe',
      'data-featherlight-iframe-width': '960',
      'data-featherlight-iframe-height': '540'
    });
  });

})(jQuery);

For using within a widget, depending on your theme, you will need to add or include the contents of global.js script.
Install Image Widget plugin: https://wordpress.org/plugins/image-widget/
Install CSS Widget Classes plugin: https://wordpress.org/plugins/widget-css-classes/
For both widget and using within content areas, you will need the WP Featherlight plugin. https://wordpress.org/plugins/wp-featherlight/
Include an image of the play icon in your images folder. One is provided here.