Changing and loading an iframe 'src' attribute with jQuery

JavaScript
2

You could use the target attribute on the link to target the iFrame.

If you have the embed links to the youtube videos, you can do something like this:


<p><a href="http://www.youtube.com/embed/Q5im0Ssyyus" target="someFrame">Charlie 1</a></p>
<p><a href="http://www.youtube.com/embed/QFCSXr6qnv4" target="someFrame">Charlie 2</a></p>
<p><a href="http://www.youtube.com/embed/eaCCkfjPm0o" target="someFrame">Charlie 3</a></p>

<iframe name="someFrame" id="someFrame" width="560" height="315"></iframe>

Live demo: [URL=“http://jsfiddle.net/GeekyJohn/GH5QG/”]http://jsfiddle.net/GeekyJohn/GH5QG/

Of course if for some reason you need to use JavaScript, then you could simply change the source of the iframe.

in jQuery parlance this would only be a few lines:


$(document).ready(function(){
    $("a").click(function(e) {
        e.preventDefault();
        
        $("#someFrame").attr("src", $(this).attr("href"));
    })
});