Quick question...

I've got a quick and dirty little jQuery script set up so that when I hover over a div (#meatHome), a smaller div with a play button pops up (#playVideo). When you hit play, a div with a youtube embed comes up and plays (#promoVideo). Everything works, save for the fact that once the video comes up, I don't want the play button to come up anymore when I hover over it. Here's the code:

1. $(function() {
2.       // Hide the play button and the video from the start
3.       $("#playVideo").hide();
4.       $("#promoVideo").hide();
5.  
6.       // On hover over the main div, show the play button
7.       $("#meatHome").hover(function(){
8.             $("#playVideo").show();
9.        },function(){
10.             $("#playVideo").hide();
11.       });
13.       // When the play button is pressed, show the video player
14.       $("#playVideo>h1>a").click(function(){
15.             $("#playVideo").hide();
16.             $("#promoVideo").show();
17.       });
18. });

Now, I have also tried using this for the function on lines 15 thru 18.

1. $("#playVideo>h1>a").click(function(){
2.       $("#playVideo").replaceWith($("#promoVideo"));
3. });

P.S. If you need the html code, here it is as well.

1. <div class="grid_7 suffix_3" id="meatHome">
2.       <div id="playVideo">
3.             <h1><a href="#">Play!</a></h1>
4.       </div>
5.       <div id="promoVideo">
6.             <object width="515" height="315"><param name="movie" value="http://www.youtube.com/v/CqSjbj12iLs&hl=en_US&fs=1&hd=1&autoplay=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/CqSjbj12iLs&hl=en_US&fs=1&hd=1&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="515" height="315"></embed></object>
7.       </div>
8. </div>

Thanks in advance!!