colorbox position is changing each time i click in a link,help needed

i have 6 images in a page that link to 6 different youtube videos.

in the first click all is good ,the video is centered in the colorbox "container" and the screen-center.

but when i close the first video and click the second , the video/colorbox is not in the center anymore ,each click it changes its position.

not to mention that the close small icon disappears completely after the second click.

only if i refresh after each click - everything is in place. can you help?

link example

     <div class="video_wrap">
            <a class='youtube'  href="http://www.youtube.com/embed/AxMhYNKzj1U?rel=0&amp;wmode=transparent"> <img src="images/videopic1.jpg" /></a>
             <span class="play_icon"></span>
        </div>





    $(document).ready(function() {
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
$(".play_icon").click(function(){
    $(this).siblings(".youtube.cboxElement").first().click();
});
});