Trouble with .attr and flash

Trouble with .attr and flash

Hello everyone,

I'm having a... I'm guessing a compatibility issue with .attr. My goal is to replace a youtube video's source with another when a link is clicked.

So far it works great in Firefox 3.5+, but Chrome, IE8 and Safari aren't doing it at all.

This is my code for the player:
  1. <div id="vidPlay">
  2.             <object class="vidTest" width="640" height="429">
  3.                   <param id="vidPlayParam" name="movie" value="YOUTUBE LINK 1"> </param>
  4.                   <param name="allowFullScreen" value="true"></param>
  5.                   <param name="allowscriptaccess" value="always"></param>
  6.                   <embed id="vidPlayMovie" src="YOUTUBE LINK 1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="429"></embed>
  7.             </object>
  8. </div>

The controller/button:
  1. <div id="vidPlayCtrl">
  2.             <a class="Ctrl" href="#vidPlay">Play 1.</a>
  3.            
  4.             <script type="text/javascript">
  5.             // <![CDATA[
  6.                   $(".Ctrl").click(function () {
  7.                       $("#vidPlayParam").attr("value","YOUTUBE LINK 2");
  8.                       $("#vidPlayMovie").attr("src","YOUTUBE LINK 2");
  9.                   });
  10.             // ]]>
  11.             </script>
  12. </div>
Any help would be appreciated. Thanks.