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

Question

我正在为图像和视频使用灯箱，但我遇到了视频问题，因为插入了一层（div 标签），所以我无法 play/stop 视频。当先点击图片时会发生这种情况，如果您先点击视频，它就会起作用。单击 "Full page" 获取代码段。

$(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>

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

Lightbox issue in mixed(Image + video) type

javascript

css

jquery

lightbox