Jquery 模态视频问题

模态视频有点小问题。我已经做了3个模态视频显然每个单独的链接。但是当我点击引导药丸打开modals所在的区域时，所有3个视频都开始在后台播放，甚至没有打开modals

我只是在视频打开时播放，然后在模式关闭时停止并重置（第一部分我真的找不到答案，而第二部分我看到的答案我能理解，所以主要是第一部分我不确定我哪里出了问题）

如果有人有时间帮我，我会很感激的

模态码

<div class="row">

    <div id="vid1" class="col-xs-12 col-md-4">
        <a href="#" class="launch-modal" data-modal-id="modal-video1">
            <span class="video-link-text">Example 1</span>
        </a>
    </div>

    <div id="vid2" class="col-xs-12 col-md-4">
        <a href="#" class="launch-modal" data-modal-id="modal-video2">
            <span class="video-link-text">Example 2</span>
        </a>
    </div>

     <div id="vid3" class="col-xs-12 col-md-4">
        <a href="#" class="launch-modal" data-modal-id="modal-video3"> 
            <span class="video-link-text">Example 3</span>
        </a>
    </div>

</div>

<!-- Modal Videos -->

<div class="modal fade" id="modal-video1" tabindex="-1" role="dialog" aria-labelledby="modal-video-label">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="modal-video">
                    <div class="embed-responsive embed-responsive-16by9">
                        <iframe class="embed-responsive-item" src="../video/example1.mp4" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-video2" tabindex="-1" role="dialog" aria-labelledby="modal-video-label">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="modal-video">
                    <div class="embed-responsive embed-responsive-16by9">
                        <iframe class="embed-responsive-item" src="../video/example2.mp4" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modal-video3" tabindex="-1" role="dialog" aria-labelledby="modal-video-label">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="modal-video">
                    <div class="embed-responsive embed-responsive-16by9">
                        <iframe class="embed-responsive-item" src="../video/example3.mp4" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

---

在代码中，您将视频放入iframe标记中。这样做的副作用是视频将自动播放

不要使用

iframe

标记，而是使用

video

标记，您可以选择关闭

autoplay

。例如（

autoplay

默认为关闭）

您的浏览器不支持视频标记。

---

关于

视频

标签的更多信息

没有人有任何想法？谢谢，这阻止了它的自动播放，非常感谢。现在要弄清楚如何启动它，并且只有在模态打开时才停止它closed@MichaelBirtwistle打开modal后播放视频有问题吗？@MichaelBirtwistle我问你，因为你没有接受我的回答。我的角色缺少什么？

$('.launch-modal').on('click', function(e){
        e.preventDefault();
        $( '#' + $(this).data('modal-id') ).modal();
    });

<video width="320" height="240" controls>
  <source src="../video/example2.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>