Динамически поменять Youtube видео без перезагрузки страницы

Question

Вот как выглядит моя html-страница (тест):

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

и мой jquery выглядит так:

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

То, что я хотел бы сделать, - это иметь возможность щелкать по каждой ссылке в элементах списка, и это видео будет отображать текущее видео. Таким образом, каждый клик приведет к тому, что другое видео будет занимать видео сверху. Кто-нибудь может помочь?

Answer 1

Я не знаю, решили вы это или нет, в любом случае проблема может заключаться в том, что URL-адрес в атрибуте VALUE тега PARAM имеет формат, отличный от того, который указан в атрибуте HREF.

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

Я думаю, вы должны передать тегу PARAM строку в правильном формате, например,

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

На самом деле я не проверял это, но вы можете попробовать.

Answer 2

Что у вас должно получиться, если вы добавите:

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