Trying to create a close player button for fixed position transparent player Created Nov 3, 2009

I have successfully created a transparent fixed-position video:
http://www.orangecountycounseling.com/a.html
I would like my user to be able to hit a "close" button and the player will disappear, and they will have access to anything underneath the player. I can hide the player, but the empty container still obscures the HTML elements underneath - preventing users from clicking on any links that may be underneath the video.

I really just want the player, container and everything to go away!

For extra credit, I would really love to use stop button that looks like a "X" instead of the square. Does anyone know the easiest way to do this?

Thanks so much!

Mark

  
<style>

#player {
	/* player dimension */
	width:537px;
	height:436px;
	display:block;
	
	/* fixed position to the bottom right corner */
	position:fixed;
	right:12px;
	bottom:12px;
	font-weight: 700;
}
</style>

<a id="player" href="http://www.orangecountycounseling.com/images/blueblock.flv"> </a>

    $f("player", {src: 'http://www.orangecountycounseling.com/images/flowplayer-3.1.5.swf', wmode: 'transparent' }, {
    
	 	canvas: {backgroundColor:'transparent',backgroundGradient:'none', border:0},
		onLoad: function() { 
		    this.setVolume(100); 
		    this.unmute();
		}, 
		  
	   //  onUnload: function() {    ///NOT SURE WHAT TO PUT HERE
	   // 	    var wrap = $(this.getParent()); 
       //        wrap.diplay = "none";
	   // },  
	 	
	    plugins: { 
	    
		    controls: { 
	            url: 'http://www.orangecountycounseling.com/images/flowplayer.controls-tube-3.1.5.swf',
	            display: 'none',
	            //hideDelay: 3000,
	            fullscreen: false,
	            time: false,
	            buttonOverColor: '#0099FF',
	            stop: true,
	            scrubber: false,
	            volume:false,
	            left: 200,
	            width: 90,
		            
	            tooltips: { 
	                buttons: true, 
	                play: 'Play', 
	                pause: 'Pause', 
	                stop: 'Close video',
	                mute: 'Mute'
	            }, 
	            tooltipColor: '#112233', 
	            tooltipTextColor: '#ccffff'  	            
	        }
        },
	 
        playlist: [ 
     
	        // user is forced to see this entry. pause action is disabled 
	        { 
	            url: 'http://www.orangecountycounseling.com/images/blueblock.flv', 
	            autoPlay: true,
	            duration: 3, 

	             onBeforePause: function() { 
	                return false; 
	            }  
	        }, 
	         
	        // this is the actual video. controlbar is shown 
	        { 
	            url: 'http://www.orangecountycounseling.com/images/blueblock.flv', 
	            autoPlay: false,
	            autoBuffering: true,
	            duration: 8,
	            
	            onStart: function() { 
	                this.getControls().show(); 
	            },
	            
	            
	            onStop: function() {   //THIS IS THE EVENT TO TRIGGER HIDING THE PLAYER
	                this.unload();
	            }
          
	            
	            
	        }     
	  ]     
	    	
	  
	 } );