Changing and Loading an Iframe ‘src’ attribute with jQuery

Here is how to change and load an iframe’s src attribute using jQuery:

Select the iframe element:
Use a jQuery selector to target the iframe element. This is commonly done using its ID.

Change the src attribute:
Use the .attr() method to change the src attribute of the selected iframe. Pass ‘src’ as the first argument and the new URL as the second argument

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:

HTML

<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>

<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>

JAVASCRIPT

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