Embed the code on the page and fire the video

Question

I have a few a tags with the name video_button_a

<a id="first_video" class="video_button_a" href="#"></a>
<a id="second_video" class="video_button_a" href="#"></a>

When I click on any of these links i need to embed this in between

<embed 
src="http://reelworks.net/player.swf" 
width="480"
height="200"
allowscriptaccess="always"
allowfullscreen="true"
flashvars="swfMovie=http://www.reelworks.net/video/runningsahara400x200.flv&amp;swfThumb=http://www.reelworks.net/video/green.jpg&amp;play_btn_scale=.65&amp;playover_color=d7d3c0&amp;playbk_alpha=.65&amp;playbk_color=d7d3c0&amp;play_color=1a1a1a',"
/>

I was thinking append but i didnt know the syntax

$('.video_button_a').click(function(){
    // code goes here 
});

Is append the way to go and if so how do I start the video, is there a way to put that code on the page and start the video

Answer 1

try this:

$('.video_button_a').click(function(){
    $('#player').html('<embed src="http://reelworks.n.... />');
    //return false (if you want to)
});

I don't know if you want to embed the code inside the "a" tag which I don't think it is a good idea since it is a flash video - that is why i have a "player" id for a separate div. You could also create something like this:

html
<div id="first_video" class="video_button_div"></div>
<div id="second_video" class="video_button_div"></div>

js
$('.video_button_div').one('click', function() {
    $(this).html('<embed src="http://reelworks.n.... />');
    //return false (if you want to)
});

css
.video_button_div {
    cursor:pointer;
    //etc
}

I hope this helps!