Bootstrap video Modal 不会自动播放，即使退出也会继续播放

Question

我有一个出现的引导模式，我希望它在弹出窗口出现后自动播放。现在你必须点击播放按钮才能播放。此外，当我关闭模式时，视频会继续在后台播放。

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（我试图在 youtube URL 的末尾添加 ?autoPlay，但没有做任何事情：

<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

这里的问题是您的模态 div 和您的 iframe 具有相同的

id

，这是无效的。看起来

$("#BetterConnect")

只选择了 div，所以您要更改

src

属性的实际上是模态 div 而不是 iframe。你会想像这样改变你的标记：

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

（注意模态 div 现在有 ID“BetterConnectModal”）和你的 javascript 像这样：

 $(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);
    });
  });