我正在尝试在模式对话框中打开视频

Question

页面上有4个视频，如果我单击4个视频链接中的任何一个，我想在模式对话框中打开视频。

我的代码：

<div  class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"><font color="black"><strong>Youtube Video</strong></h5>
      </div>
      <div class="modal-body">
         <form method="POST"  id="otp_form" action="">
            <div class="thumb" id="exampleModalVideoUrl"></div>
          </form>
      </div>
    </div>
  </div>
</div>

 <section id="gallery" class="bg-lighter">
      <div class="container-fluid pt-70 pb-0">
        <div class="section-content">
          <div class="row">
            <div class="col-md-12">
              <div id="grid" class="gallery-isotope grid-4 gutter clearfix">
                <div class="gallery-item photography">
                   <div class="price pt-30">
                        <h5 class="text-uppercase letter-space-2"></h5>
                      </div>
                  <div class="thumb galerryVideoCopy">
                    <iframe width="972" height="547" src="https://youtube.com/embed/<?php print_r( $page_info[0]['link1']); ?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                  </div>
                </div>
                <div class="gallery-item branding">
                    <div class="price pt-30">
                        <h5 class="text-uppercase letter-space-2"></h5>
                      </div>
                  <div class="thumb galerryVideoCopy">
                   <iframe width="972" height="547" src="https://youtube.com/embed/<?php print_r( $page_info[0]['link2']); ?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                  </div>
                 </div>
                <div class="gallery-item design">
                    <div class="price pt-30">
                        <h5 class="text-uppercase letter-space-2"></h5>
                      </div>
                  <div class="thumb galerryVideoCopy">
                   <iframe width="972" height="547" src="https://youtube.com/embed/<?php print_r( $page_info[0]['link3']); ?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                  </div>
               </div>
                <div class="gallery-item photography">
                   <div class="price pt-30">
                        <h5 class="text-uppercase letter-space-2"></h5>
                      </div>
                  <div class="thumb galerryVideoCopy">
                    <iframe width="972" height="547" src="https://youtube.com/embed/<?php print_r( $page_info[0]['link4']); ?>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                  </div>
                 </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <script type="text/javascript">
            jQuery('document').ready(function(){
              jQuery("#exampleModal").modal({"keyboard": true, "show": false});
              jQuery('body').off('click', '.galerryVideoCopy');
              jQuery('body').on('click', '.galerryVideoCopy', function(){
                var clickVideo = jQuery(this).html();
                jQuery("#exampleModalVideoUrl").html(clickVideo);
                jQuery("#exampleModal").modal("show");
              });
            });
   </script>

在上面的代码中，如果我单击视频，它将直接播放而不是在模式框中播放。如何在模式对话框中显示视频？