如何使子级img标签与父级div一起可点击？

Question

我在ul元素类.slider-lightbox上使用了光滑的灯箱。单击li时一切正常，但是在第一个li上，我在中心添加了一个play-btn类，该位置不可单击，但外部部分可单击。那么，如何使.play-btn类及其li成为可点击的呢？谢谢。

 $(document).ready(function(){
  $('.slider-lightbox').slickLightbox({
        navigateByKeyboard: true
    });

   $('.video .play-btn').click(function() {
       $('.video .play-btn').closest('.video').trigger("click");
       return false;
   })
 })
 

<ul class="slider-lightbox">
	<li class="video active">
		<a href="https://www.youtube.com/embed/g_192AvTJcM" width="400px" target="_blank">
			<img src="images/community/img2.jpg" alt="">
		</a>
		<img class="play-btn" src="images/video-icon.png">
	</li>
	<li class="image active">
		<a href="images/community/img3.jpg" target="_blank">
			<img src="images/community/img3.jpg" alt="">
		</a>
	</li>
	<li class="image active">
	     <a href="images/community/img1.jpg" target="_blank">
     		<img src="images/community/img1.jpg" alt="">
	     </a>
   </li>
  </ul>