CODEWITHSUNDEEP
jqueryyoutube
Tillz
Tillz

Reputation: 13

Dynamically Swap Youtube Video Without Page Reload

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"></param><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">Video 1</a></li>
    <li><a class="btn" href="http://www.youtube.com/watch?v=7o53S5JROfg">Video 2</a></li>
    <li><a class="btn" href="http://www.youtube.com/watch?v=e2ZB-1kDOdQ">Video 3</a></li>
    <li><a class="btn" href="http://www.youtube.com/watch?v=d-PDXAcUw0s">Video 4</a></li>
    <li><a class="btn" href="http://www.youtube.com/watch?v=vCH8O1dLSbc">Video 5</a></li>
    <li><a class="btn" href="http://www.youtube.com/watch?v=Q8kLlNt3Ue4">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?

Upvotes: 1

Views: 1773

Answers (2)

tubetto
tubetto

Reputation: 19

I don't know if you solved it or not, anyway the problem may be that the URL in the VALUE attribute of the PARAM tag has a different format than the one specified in the HREF attribute.

<param class="movie" name="movie" value="http://www.youtube.com/v/zkd5dJIVjgM">
<a class="btn" href="http://www.youtube.com/watch?v=n3gYWBu1NDI">

I think you should pass the PARAM tag a string with the proper format, something like

http://www.youtube.com/v/VIDEO_ID_HERE

Actually I've not tested this, but you can give it a try.

Upvotes: 1

bmsterling
bmsterling

Reputation: 41

What you have should work if you add:

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

Upvotes: 0

Related Questions