What am I missing in making this simple jquery video player work?
<p>I have 2 videos that I'm displaying on a page. <code>Onload</code>, both videos are hidden and simply a poster is shown. On clicking one of the buttons, a video is played. Which video is determined by some nested (hidden) data in the button.</p>

<p>I'm holding my videos in a variable like so:</p>

<pre><code>var video_1 = '&lt;video width="840" height="472" controls autoplay class="video_1"&gt;' +
   '&lt;source src="/mov/video1.mp4"  type="video/mp4"  /&gt;' + 
   '&lt;source src="/mov/video1.webm" type="video/webm" /&gt;&lt;/video&gt;';

var video_2 = '&lt;video width="840" height="472" controls autoplay class="video_2"&gt;' +
    '&lt;source src="/mov/video2.mp4"  type="video/mp4"  /&gt;' +
    '&lt;source src="/mov/video2.webm" type="video/webm" /&gt;&lt;/video&gt;';
</code></pre>

<p>And my jquery to bring this up is like so:</p>

<pre><code>$('#video_selection_wrap .play_wrap').live('click',function(){
    // get the nested data from the button
    var video = $(this).children('.data').text();

    // hide the poster
    $('.poster').fadeOut(function(){
        $('#main-movie').empty();
        switch(video) {
            case 'video_1':
                video_play = video_1;
            break;
            case 'video_2':
                video_play = video_2;
            break;
        }

        // load the appropriate video_play into the movie box
        $('#main-movie').html(video_play).show();
    });
});
</code></pre>

<p>The above code works a treat <strong>for the first video I click</strong>. What I was hoping would happen however was that if I clicked on another button, it would empty the movie container and load the other video - this isn't the case.</p>

<p>Can you see the problem?</p>

<p>I'm thinking it has something to do with the 'hide the poster' bit. Because its hidden the first time, the second time it doesn't <code>fadeOut</code>, and so it doesn't execute any of the code within its function. Is that how it works?</p>

<p><strong>Edit:</strong>
Here is a working jsfiddle of the problem <a href="http://jsfiddle.net/RrC2u/" rel="nofollow">http://jsfiddle.net/RrC2u/</a></p>
