Adding a URL to an Iframe being called by Fancybox2-AJAX Based on the Iframe's ID

问题

Okay I have this working minus the fact of having this working once I call in with fancybox via AJAX.

Static Example Works:

 <iframe id="videourl1" width="640" height="340" src="" frameBorder="0"></iframe>
 <iframe id="videourl2" width="640" height="340" src="" frameBorder="0"></iframe>
 <iframe id="videourl3" width="640" height="340" src="" frameBorder="0"></iframe>

$("div.video-container iframe").each(function(){var idAdd=$(this).attr("id");$(this).attr("src","http://www.youtube.com/embed/"+idAdd+"?rel=0&autoplay=0&modestbranding=1&showinfo=0&autohide=1")})

Now when I take this and pull the 3 iframes into .txt files and call them from an index.html file using fancybox2-ajax call it fails:

Index.html:

  <a id="1" class="fancybox fancybox.ajax" href="text/1.txt">Link</a>
  <a id="2" class="fancybox fancybox.ajax" href="text/2.txt">Link</a>
  <a id="3" class="fancybox fancybox.ajax" href="text/3.txt">Link</a>

Text files contain the iframes:

  <iframe id="videourl" width="640" height="340" src="" frameBorder="0"></iframe>

How do I code the JS to say run each time when the iframe is called in by AJAX?

回答1:

You can use the fancybox callback afterLoad to run javascript after the content is loaded.

However, it does seem unnecessary to jump through all these hoops to load a video instead of just using the media helper:

<a class="fancybox-media" href="http://www.youtube.com/watch?v=opj24KnzrWo">Youtube</a>

<script type="text/javascript">
$(document).ready(function() {
    $('.fancybox-media').fancybox({
        helpers : {
           media : {}
    }
});
</script>

});

回答2:

Answer:

$(".fancybox").fancybox({
    afterShow: function () {
        $("div.video-container iframe").each(function () {
            var idAdd = $(this).attr("id");
            $(this).attr("src", "http://www.youtube.com/embed/" + idAd‌d + "?rel=0&autoplay=0&modestbranding=1&showinfo=0&autohide=1")
        });
    }
});

来源：https://stackoverflow.com/questions/24920636/adding-a-url-to-an-iframe-being-called-by-fancybox2-ajax-based-on-the-iframes-i

标签

javascript

jquery

ajax

fancybox-2