混合（图片+视频）类型的灯箱问题

Question

我正在将灯箱用于图像和视频，但是由于插入了一个图层（div标签），所以我在视频方面遇到了问题，因此我无法播放/停止视频。首先单击图像会发生这种情况。如果先单击视频，它将起作用。点击“完整页面”以获取摘要。

$(document).on('click', '[data-toggle="lightbox"]', function(event) {
            event.preventDefault();
            $(this).ekkoLightbox();
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" rel="stylesheet"/>
<div class="row">
	<a href="https://www.sample-videos.com/img/Sample-png-image-100kb.png" data-toggle="lightbox" data-gallery="gallery_0" class="col-6 form-group w-100">
		<img src="https://www.sample-videos.com/img/Sample-png-image-100kb.png" class="img-fluid w-100 h-100">
	</a>
	<a href="https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" data-toggle="lightbox" data-gallery="gallery_0" class="col-6 form-group w-100">
		<video width="320" height="240" autoplay="autoplay">
			<source src="https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
			Your browser does not support the video tag.
		</video>
	</a>
</div>

Answer 1

存在一些CSS问题。希望它对您有用。

$(document).on('click', '[data-toggle="lightbox"]', function(event) {
            event.preventDefault();
            $(this).ekkoLightbox();
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css" rel="stylesheet"/>
<style>
.ekko-lightbox-container > div.ekko-lightbox-item.show {
    z-index: 001;
}
</style>
<div class="row">
	<a href="https://www.sample-videos.com/img/Sample-png-image-100kb.png" data-toggle="lightbox" data-gallery="gallery_0" class="col-6 form-group w-100">
		<img src="https://www.sample-videos.com/img/Sample-png-image-100kb.png" class="img-fluid w-100 h-100">
	</a>
	<a href="https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" data-toggle="lightbox" data-gallery="gallery_0" class="col-6 form-group w-100">
		<video width="320" height="240" autoplay="autoplay">
			<source src="https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
			Your browser does not support the video tag.
		</video>
	</a>
</div>