javascript - 混合(图片+视频)类型的灯箱问题

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>