Dynamically Swap Youtube Video Without Page Reload

Question

Hello,

Here is what my html page looks like (test):

<div style="width: 640px;">
<object width="640" height="385"><param class="movie" name="movie" value="http://www.youtube.com/v/zkd5dJIVjgM"&gt;&lt;/param&gt;&lt;param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zkd5dJIVjgM" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>
<ul>
    <li><a class="btn" href="http://www.youtube.com/watch?v=n3gYWBu1NDI"&gt;Video 1</a></li>
    <li><a class="btn" href="http://www.youtube.com/watch?v=7o53S5JROfg"&gt;Video 2</a></li>
    <li><a class="btn" href="http://www.youtube.com/watch?v=e2ZB-1kDOdQ"&gt;Video 3</a></li>
    <li><a class="btn" href="http://www.youtube.com/watch?v=d-PDXAcUw0s"&gt;Video 4</a></li>
    <li><a class="btn" href="http://www.youtube.com/watch?v=vCH8O1dLSbc"&gt;Video 5</a></li>
    <li><a class="btn" href="http://www.youtube.com/watch?v=Q8kLlNt3Ue4"&gt;Video 6</a></li>
</ul>
</div>

and my jquery looks like this:

$('.btn').click(function(e){
e.preventDefault();
var val = $(this).attr("href");
$('embed').attr('src', val);
});

What i would like to do is be able to click on each link in the list items and have that video repalce the current video that is there. So each click will result in a different video occupying the video at top. Can anyone help?

Answer 1

What you have should work if you add:

$('param[name=movie]').attr('value', val);