Я хочу показать видео в диалоге модели после клика

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">
            <iframe width="972" height="547" src="#" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </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">
                    <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 data-toggle="modal" data-target="#exampleModal"></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">
                   <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">
                   <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">
                    <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>

Я не знаю, как это сделать после нажатия на любое видео, которое открывается в окне модели.

Answer 1

<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 data-toggle="modal" data-target="#exampleModal"></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>