how to play a embed video in a dragable div

how to play a embed video in a dragable div

Hi friends,

I have embeded a video in a dragable and resizable div. It's working fine, but when I want to play/stop the video I can't.

How could I press the buttons of the video player? is it possible?

I attach my code ...

---------------------

<?php require_once("common_functions.php")?>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>4 eyes</title>

<link rel="stylesheet" href="css/jquery-ui-1.8.4.custom.css" type="text/css" media="screen"/>
<link rel="StyleSheet" type="css/text" href="./css/style.css" title="Contemporary"/>
<link rel="stylesheet" href="css/header_search.css" type="text/css" media="screen"/>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript" src="./js/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript" src="./js/resolucion3.js"></script>
<script type="text/javascript" src="./js/search.js"></script>

<script type="text/javascript">
jQuery(document).ready(function(){
   $('#mensaje').hide(); 
   $('#mensaje').css({'width':screen.width, 'height':'auto'});
  
   $(document).mousemove(function(e){
      if ((parseInt(e.pageY)<=0) ){         
        $('#mensaje').slideDown("slow");
      }
   });
  
   $('#cerrar').click(function(){
               $('#mensaje').slideUp(3000);;
           }    
   )

/***********************/

$(".redim").draggable({
                containment: '#contenedor',
                scroll: false
         }).mousemove(function(){
                var coord = $(this).position();
                //$("p:last",this).text( "left: " + coord.left + ", top: " + coord.top );
         }).mouseup(function(){
                var coords=[];
                var coord = $(this).position();
                var size_w= $(this).width();
                var size_h= $(this).height();
               
                var item={ coordTop:  coord.left, coordLeft: coord.top,sizeW: size_w, sizeH:size_h};
                  
                coords.push(item);
               
                var order = {id:this.id, coords: coords };               
                $.post('http://localhost/prototipos/updatecoords.php', 'data='+$.toJSON(order), function(response){
                       
                        if(response.indexOf("success")>=0)
                            $("#respond").html('<div class="success">X and Y Coordinates Saved!</div>').hide().fadeIn(1000);
                            setTimeout(function(){ $('#respond').fadeOut(1000); }, 2000);
                        });
          });



/*************************/  
})
</script>

<style>
   
#mensaje{
    border:solid 1px #CCCCCC;
    background-color:#DDDDDD;   
    opacity:0.4;filter:alpha(opacity=40);       
    z-index:5;
    position:fixed;
    margin:0px;
     padding:0px;

}

.redim_cont{
 position:relative;
 height:auto;
 margin:0px;
 padding:0px;
}


#izquierda {
 opacity:0.6;filter:alpha(opacity=60);
 float:left;

 
 background-color:#0066CC;
 z-index:1;
 margin:0px;
 padding:0px;
}
#izquierda2 {
 float:left;

 
 background-color:#DD66DD;
 z-index:1;
 margin:0px;
 padding:0px;
}

#derecha {
 float:left;


 background-color:#7197B7;
 z-index:1;
 margin:0px;
 padding:0px;
}

#derecha2 {
    
 float:left;

 
 background-color:#719700;
 z-index:1;
 margin:0px;
 padding:0px;
}

#cerrar {
   float:right;
   margin-right:5px;
   cursor:pointer;
   font:Verdana, Arial, Helvetica, sans-serif;
   font-size:12px;
   font-weight:bold;
   color:#FFFFFF;
   background-color:#666666;   
   position:absolute;
   left:900px;
   top:0px;
   width:50px;
   margin-top:-1px;
   text-align:center;
}   

.redim{
    cursor:move;
    position:absolute;
}

</style>




</head>

<body>

<?php
$width=470;
$height=368;

$video1 = trim($_POST['video1']);
$tipo1 = trim($_POST['tipo1']);
$video2 = trim($_POST['video2']);
$tipo2 = trim($_POST['tipo2']);
$video3 = trim($_POST['video3']);
$tipo3 = trim($_POST['tipo3']);
$video4 = trim($_POST['video4']);
$tipo4 = trim($_POST['tipo4']);       
   
?>


<div id="mensaje">
        <?php
        require_once("header.php");
        ?>
        <div id="cerrar">Cerrar la ventana X</div>

</div>


<div id="contenedor" class="redim_cont">

     <div id="izquierda" class="redim">
         <?php print_player($video1,$tipo1);    ?>
    </div>

     <div id="derecha" class="redim">
         <?php print_player($video2,$tipo2);    ?></div>





     <div id="izquierda2" class="redim">
         <?php print_player($video3,$tipo3);    ?>
     </div>

     <div id="derecha2" class="redim"><?php
            print_player($video4,$tipo4);
            ?>
    </div>
   
</div>


</body>
</html>