javascript YouTube Bootstrap Modal AutoPlay

Posted 2021-05-03

<!-- VIDEO PLAY -->
    <section id="video-play">
      <div class="dark-overlay">
        <div class="row">
          <div class="col">
            <div class="container p-5">
              <a
                href="#"
                class="video"
                data-video="https://www.youtube.com/embed/-MlNBTSg_Ww"
                data-toggle="modal"
                data-target="#videoModal"
                ><i class="fas fa-play fa-3x"></i
              ></a>
              <h1>See What We Do</h1>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- VIDEO MODAL -->
    <div class="modal fade" id="videoModal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
            <button class="close" data-dismiss="modal">
              <span>&times;</span>
            </button>
            <iframe
              src=""
              frameborder="0"
              height="350"
              width="100%"
              allowfullscreen
            ></iframe>
          </div>
        </div>
      </div>
    </div>

<script>
  // Video Play
  $(function() {
    // Auto play modal video
    $(".video").click(function() {
      var theModal = $(this).data("target"),
        videoSRC = $(this).attr("data-video"),
        videoSRCauto =
          videoSRC +
          "?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1";
      $(theModal + " iframe").attr("src", videoSRCauto);
      $(theModal + " button.close").click(function() {
        $(theModal + " iframe").attr("src", videoSRC);
      });
    });
  });
</script>