Video Player

                                    
                                        <!-- VIDEO THUMBNAIL WRAPPER -->

                                        <a href="javascript:void(0);" target="_self" class="video-wrapper" data-bs-toggle="modal" data-bs-target="#modalID">

                                        <img src="/images/directory/filename.jpg" alt="Video Description" border="0" loading="lazy" />

                                        </a>
                                    
                                

                                    
                                        <!-- 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>