Bootstrap video Modal doesn't autoplay & continues to play even when exited

Question

I have a bootstrap modal that appears and I want it to autoplay once the popup appears. Right now you have to click on the play button for it to play. Also, when I close the modal the video continues to play in the background.

JS:

 $(document).ready(function () {
    var url = $("BetterConnect").attr("src");
    $("#BetterConnect").on("hide.bs.modal", function () {
      $("#BetterConnect").attr("src", "");
    });
    $("#BetterConnect").on("show.bs.modal", function () {
      $("#BetterConnect").attr("src", url);
    });
  });

HTML (I tried to add ?autoPlay at the end of the youtube URL but that didn't do anything:

<div id="BetterConnect" class="modal fade" style="display: none">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">×</span>
            </button>
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">
                <div class="modal-body">
                  <iframe
                    id="BetterConnect"
                    width="450"
                    height="550"
                    src="https://www.youtube.com/embed/skFzBaX41NM?autoplay=1"
                    frameborder="0"
                    allowfullscreen=""
                  >
                  </iframe>
                </div>
              </div>
            </div>
          </div>

Answer 1

The issue here is that both your modal div and your iframe have the same id which is invalid. It looks like $("#BetterConnect") only selects the div, so what you're changing the src attribute on is actually the modal div rather than the iframe. You'll want to change your markup like so:

      <div id="BetterConnectModal" class="modal fade" style="display: none">
        <button
          type="button"
          class="close"
          data-dismiss="modal"
          aria-label="Close"
        >
          <span aria-hidden="true">×</span>
        </button>
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-body">
              <iframe
                id="BetterConnect"
                width="450"
                height="550"
                src="https://www.youtube.com/embed/skFzBaX41NM?autoplay=1"
                frameborder="0"
                allowfullscreen=""
              >
              </iframe>
            </div>
          </div>
        </div>
      </div>

(note the modal div now has the id "BetterConnectModal") and your javascript like so:

 $(document).ready(function () {
    var url = $("BetterConnect").attr("src");
    $("#BetterConnectModal").on("hide.bs.modal", function () {
      $("#BetterConnect").attr("src", "");
    });
    $("#BetterConnectModal").on("show.bs.modal", function () {
      $("#BetterConnect").attr("src", url);
    });
  });