jquery - 在灯箱暂停按钮后重新加载多个 iframe 并导致所有 iframe 仅显示一个视频

Question

我制作了一个灯箱，以便点击图片并显示视频。

我遇到的问题是点击灯箱后它不会暂停。我找到了一个解决方案，方法是创建一个按钮，单击该按钮会退出灯箱并清除，然后刷新 iframe，它工作正常。

但我遇到的问题是我有多个 iframe，当我在单击关闭按钮后单击另一个 iframe 时，它​​们都会刷新到第一个 iframe 而不是它们自己的 iframe。有没有办法解决？谢谢。

    <script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
    <script language="javascript" type="text/javascript">
    $(function(){
        $('.close').click(function(){      
            $('iframe').attr('src', $('iframe').attr('src'));
        });
    });
    </script>

 <div class="vids">
    <!-- First Video-->
    <a href="#img4"  >
        <img src="media/Gratia Promotional Images/ij15.jpg" width="80%">
                  <h3 class="vidDescripts">I have found a very good thing | Isaiah & Julia</h3>
    </a>  
    <a href="#_" class="lightbox" id="img4">
        <div id="videoModal" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel" aria-hidden="false" style="display: block; margin-top:10%">
            <div class="modal-body">
                <iframe width="100%" height="100%" src="https://www.youtube.com/embed/RVop5Kp67Zw" frameborder="0" allowfullscreen="" onpause="true" ></iframe>
            </div>
            <button class="close" onclick="pauseVid()">Click here to close video</button>
          </div>

    <!--Second Video-->
    <a href="#img1">
        <img src="media/Gratia Promotional Images/10.jpg" width="80%">
            <h3 class="vidDescripts">Because you are uniquely you. | Austin & Eliza</h3>
    </a>  
   <a href="#_" class="lightbox" id="img1">
        <div id="videoModal" class="modal hide fade in" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel" aria-hidden="false" style="display: block;margin-top:10%">
         <div class="modal-body">
             <iframe width="100%" height="100%" src="https://www.youtube.com/embed/olJC0yAbaWs" frameborder="0" allowfullscreen=""></iframe>
            </div>         
                <button class="close" onclick="pauseVid()">Click here to close video</button>
           </div>
    </div>

Answer 1

我想通了。我必须为每个 iframe 制作单独的 ID，然后对每个视频使用 $(#vidID).attr('src', url); 并且效果很好!

最终的 jQuery 看起来像这样:

    <script language="javascript" type="text/javascript">
    $(function(){
        $('.close').click(function(){  
            $('#ijVid').attr('src','https://www.youtube.com/embed/RVop5Kp67Zw');
            $('#aeVid').attr('src','https://www.youtube.com/embed/olJC0yAbaWs');
            $('#scVid').attr('src','https://www.youtube.com/embed/CTxpBGu2wyQ');
            $('#mlVid').attr('src','https://www.youtube.com/embed/QvMIkhlFJ2s');
        });
    });