Jquery UI Draggable with Flash objects

Question

How do i make a flash object draggable. Below is a youtube embed code. I'm trying to make the player draggable. Doing a .draggable on the tag object doesn't seem to work. Any ideas.

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js" type="text/javascript"></script>



<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/qgnfcCZ_yew?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/qgnfcCZ_yew?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>

<script type="text/javascript">
$("object").draggable();
</script>

Answer 1

You need to wrap your embed code in a div See working code: http://jsfiddle.net/CTKhK/1

<div id="youVid">
  ... // place embed code here
</div>

$(function(){
$("#youVid").draggable();
});

Edit: See if this convinces you: http://jsfiddle.net/CTKhK/2/