<!-- VIDEO THUMBNAIL WRAPPER -->
<div class="video-wrapper" data-bs-toggle="modal" data-bs-target="#modalID">
<img src="/images/directory/filename.jpg" alt="Video Description" border="0" loading="lazy" />
</div>
<!-- MODAL START | MODAL ---------------------------------------------------------------------------------------------------- -->
<div class="modal modal-video fade" id="modalID" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<p class="modal-title" id="modalLabel">Modal Title</p>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="video-container">
<iframe src="https://www.url.com" frameborder="0" allowfullscreen="" title="Video Title" class="embed-responsive-item" id="videoID">
</div>
</div>
</div>
</div>
</div>
<!-- MODAL END | MODAL ---------------------------------------------------------------------------------------------------- -->
<!-- JAVASCRIPT ---------->
<script type="text/javascript">
$(document).ready(function() {
$('#modalVideo').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget)
var btnIndex = button.data('myid')-1;
var vidSrcSet = ["https://www.url.com"];
var vidTitleSet = ["Modal Title"];
var modal = $(this)
modal.find('.modal-body iframe').attr( "src" , vidSrcSet[btnIndex] );
modal.find('.modal-body iframe').attr( "title" , vidTitleSet[btnIndex] );
modal.find('.modal-header .modal-title').text( vidTitleSet[btnIndex] );
});
$('.modal-video').on('hide.bs.modal', function(e) {
var $if = $(e.delegateTarget).find('iframe');
var src = $if.attr("src");
$if.attr("src", '/empty.html');
$if.attr("src", src);
});
});
</script>