我正在将灯箱用于图像和视频,但是由于插入了一个图层(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>