Hide a div until images inside that div load from YouTube

Question

I have created an image gallery by using lightGallery. I use it to display YouTube videos and images.
For YouTube video thumbnail I have added an image of play button using :after CSS for the <a> tag in code.
I am getting an issue, while page is loading YouTube video thumbnails and image thumbnails are loading slow at that time the play button loading before thumbnail.
It is causing an issue in design and not looking good.
How can I display play button image after thumbnail image completely loaded?

HTML:

<div class="project-item Pre-weddingPhotoshoot">
  <div class="thumb video-thumb">
    <a class="img-wrap1" href="https://www.youtube.com/watch?v=VQdjtCNhlCg">
      <img src="https://img.youtube.com/vi/VQdjtCNhlCg/hqdefault.jpg" 
           alt="Pre-wedding Photoshoot" class="lazy"/>
    </a>
  </div>
</div>

jQuery:

$('#lightbox-image-gallery-Pre-weddingPhotoshoot').lightGallery({
    download: false,
    share: false,
    rotate: false,
    zoom: true,
    scale: 0.5,
    hash: false,
    selector: 'a' 
});

CSS:

.projects-list .project-item .video-thumb:after {
    content: '';
    position: absolute;
    right: 5px;
    bottom: 5px;
    background-image: url(../images/video.png) !important;
    height: 24px;
    width: 34px;
}

Screenshot