Question

I am trying to dynamically add the src attribute to iframes, taken from their respective id’s.

Here is what I am working with (using improper use of ‘this’ but you should get what I am trying to do.)

$(this).parent().find("iframe").attr('src', http://www.youtube.com/embed/" + $(this).attr('id'));

my iframe code looks something like this:

<iframe id = "XpOPKZB8dgY" src=""></iframe>

some more context if it helps:

<script>    
    $(document).ready(function() {
        $("iframe").attr('src', '');   
        $(".details").slideUp();   
        $("a.date").click(function() {   
            var key = $(this).parent().attr('class');  
            $(this).parent().children("div").slideToggle('slow');    
            $(this).parent().find("iframe").attr('src', "http://www.youtube.com/embed/" + $(this).attr('id');                    
            $(document.body).animate({    
                'scrollTop':   $(this).offset().top    
            },   1000);    
        });  
    });

</script>

Thanks!

Answer 1

You could do it like this:

$(this).parent().find("iframe").each(function(i) {
    var src = 'http://www.youtube.com/embed/' + $(this).attr('id')
    $(this).attr('src', src);
});