Hi flowplayer community, I'd like to give a big thumbs up!! to this site.
I'm a newbie here and would really appreciate some help.

I've used the tabs tutorial to create two tabs, inside each tab is a video. when you click on the video it exposes that video, plays it and then closes automatically.

The problem i'm having is that it doesn't expose the first video properly, the expose is over the first video but the second video works fine. Please can someone help, I need to get this sorted asap. Thanks ;-)

here is my html, css and code



<div id="my_tabs">

<!-- tabs -->
<ul class="css-tabs skin2">
	<li><a href="#">English welcome video</a></li>
	<li><a href="#">second language welcome video</a></li>
</ul>

<!-- panes -->
<div class="css-panes skin2">
	<div id="tabbed" style="display:block">
	
		

<!-- the player -->

<div class="black box" id="player_wrap"><a class="myPlayer" id="player1" href="http://vod01.netdna.com/vod/demo.flowplayer/flowplayer-700.flv"><img src="http://static.flowplayer.org/img/player/btn/play_text_large.png" alt="Show me" /></a></div>
	
		<h3>Welcome to learning my language</h3>
		
		<p>This site has been developed in order to assist you in learning different languages, with the primary language being English. We have created this video to explain how you can successfully navigate around this site and receive maximum benefit from our material. </p>
		
		<p>Please watch the video and view our sample material. If you decide that you would like to become a member and gain access to all of our material, "Click Here" to view our packages and choose the one that's appropriate for you.</p>
		<p>We have a range of material that will help to facilitate students development regardless of their level. We hope you find this site beneficial and informative and we ask you to recommend it to your friends and family.</p>
		<p>From all of us at Learning My Language, happy learning.</p>
		<br clear="all" />
		
	</div>
	
	<div id="tabbed1">
	
	
	<div class="black box" id="player_wrap1"><a class="myPlayer" id="player" href="http://vod01.netdna.com/vod/demo.flowplayer/flowplayer-700.flv"><img src="http://static.flowplayer.org/img/player/btn/play_text_large.png" alt="Show me" /></a></div>
	
		<h3 class="language"></h3>
					
<br clear="all" />
	</div>
	
	
</div><!-- /css-panes skin2 -->

</div><!-- /my_tabs -->




#exposeMask {
	background-color: #000;
	background-image: url(../images/video_logo.png);
	background-repeat: no-repeat;
	background-position: 170px 66px;
}

/* player splash image styling */
#player, #player1 {
	background-image:url(../images/video.png);
	width:500px;
	height:344px;
	display:block;
	text-align:center;
	margin:10px auto;
}

#player img, #player1 img {
	margin-top:110px;
	border:0px;
}

/* style for the player's wrapper element */
#player_wrap, #player_wrap1 {
	background:#000 url(../images/h300.png) 0 0 repeat-x;
	width:510px;
	float:left;
	margin-right:15px;
	}





// execute your scripts when the the DOM is ready. this is a good habit
$(function() {

/* here is the exposing part of this demo */
var expose = $(".myPlayer").expose({

	// return exposing API
	api: true,
	
	// use our customized mask
	maskId: 'exposeMask',

	// mask shows only 10% of the content through
	opacity: 0.9,

	// close expose slowly
	closeSpeed: 'slow',

	// we only want to close exposing when playback is finished
	// (or the ESC button is pressed)
	closeOnClick: true,

	// when the mask closes, alter its background color
	onBeforeClose: function() {
		this.getMask().css({backgroundColor: '#fff'});
		$f().pause();
	},

	// when the mask loads again, use the original background color
	onBeforeLoad: function() {
		this.getMask().css({backgroundColor: null});
	}
});

// install flowplayer.

$f(".myPlayer", "http://releases.flowplayer.org/swf/flowplayer-3.1.5.swf", {

	// when playback starts, perform exposing
	onStart: function() {
		expose.load();
	},

	onResume: function() {
		expose.load();
	},

	// when playback finishes, close the expose
	onFinish: function() {
		expose.close();
	}

});

});

thanks again