I've got a page with a container that has several videos embedded from vimeo via their new universal embed. All of the videos are each in a smaller container which has the iframe embed and a paragraph describing the video. jQuery has the smaller containers initially hidden, and dynamically selects and fades in the appropriate container depending on which thumbnail you click on. Whichever container is active can be faded out by clicking on a close-button or outside of the container (think lightbox). Of all the smaller containers that have a video, there is one that has two videos and they can be toggled between by a link below the video. When loaded, video #regular shows and clicking the link fades it out then fades #behind in.

The issue I'm running into is that if I open a video, close it, then open the same or another video the Vimeo player is hidden. The smaller container with the individual paragraph information is brought in perfectly. 

The code I've written brings in one container at a time pertaining to the thumbnail you click on. I think the issue is that it explicitly hides the videos to accomodate that single video toggle. 

Thanks for your help!

HTML:

```
<div id="container">
    <div id="close"></div>
    <div id="tide" class="vim">
        <iframe class="vid" src="http://player.vimeo.com/video/1747304?api=1&amp;title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff"></iframe>
        <p>
            "It's High Tide Baby!"<br />
            The Blackout feat. Ian Watkins (Lostprophets)<br />
            Fierce Panda
        </p>
    </div>
    <div id="knew" class="vim">
        <iframe class="vid" src="http://player.vimeo.com/video/4622464?api=1&amp;title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff"></iframe>
        <p>
            "If Only They Knew"<br />
            A Rocket To The Moon<br />
            Fueled by Ramen/Atlantic Records
        </p>
    </div>
    <div id="fire" class="vim">
        <iframe id="regular" class="vid" src="http://player.vimeo.com/video/22327264?api=1&amp;title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff"></iframe>
        <iframe id="behind" class="vid" src="http://player.vimeo.com/video/22466069?api=1&amp;title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff"></iframe>
        <p style="float:left">
            "Sound of Fire"<br />
            This Century<br />
            Warner Brothers Records
        </p>
        <p id="bts" style="float:right;color:#000000;cursor:pointer;">
            &nbsp;<br />
            Click to launch the "Sound of Fire" behind the scenes video!<br />
            &nbsp;
        </p>
    </div>

```

JavaScript:

```
//Hide containers
$('.vim, #behind, #close, #container, #underlay').hide();

//Fade in video corresponding to thumbnail
$('.thumbnail').click(function() {
    var id = $(this).attr("id").replace("show_","").toLowerCase();
    $('#' + id + ', #close, #container, #underlay').fadeIn(400);
    var player=$f($('.vid:visible')[0]);
    player.api("seekTo", "0").api('play');

});

//Toggle between videos in the #fire div
$('#bts').click(function() {
    $('#regular').fadeOut(400, function () {
        $f(this).api('pause');
        $('#behind').fadeIn(400, function () {
            $f(this).api('play');
        });
    });
});

//Close whichever video is visible
$('#close, #underlay').click(function() {
    var $videos = $('.vid');
    $f($videos.filter(':visible')[0]).api('pause');
    $videos.hide();
    $('.vim, #close, #container, #underlay').fadeOut(400, function() {
        $videos.first().show();
    });
});

```

---

```
    $('#close, #underlay').click(function() {
        var $videos = $('.vid');
        $f($videos.filter(':visible')[0]).api('pause');
        $('.vim, #close, #container, #underlay').fadeOut(400, function() {
            $('#behind').hide();
            $('#regular').show();
        });
    });

```