Use a jquery UI slider to control the resizing of a youtube video.

Question

Hi, I have a resizable div with the video width and height 100% of the div. I can resize it using the corners but I want to control this with a ui slider and maintain the "aspectRatio: 16/9" that .resizable() provides.

This is what I have so far

<script>
    $(function(){
    var slide_int = null;

    function update_slider(){
        var offset = $('.ui-slider-handle').offset();
        var value = $('#slider-range-max').slider('option', 'value');
        $('#Youtube').width(+value);
}     
    $('#slider-range-max').slider({
        step: 5,
        min: 200,
        max: 950,
        start: function(event, ui){
    $('#amount').empty();
        slide_int = setInterval(update_slider, 5); 
},
        slide: function(event, ui){
            setTimeout(update_slider, 5);  
},
        stop: function(event, ui){
            clearInterval(slide_int);
            slide_int = null; 
  }
        $('#Youtube')
        .resizable({aspectRatio: 16/9});});
    </script> 

The Slider

<div id="slider-range-max"></div>

Div

<div id="Youtube">
<object width="100%" height="100%">
  <param name="movie" value="http://www.youtube.com/v/JC7aWY5chyI&amp;hl=en_US&amp;fs=1&amp;"&gt;
  </param>
  <param name="allowFullScreen" value="true">
  </param>
  <param name="allowscriptaccess" value="always">
  </param>
  <embed src="http://www.youtube.com/v/JC7aWY5chyI&amp;hl=en_US&amp;fs=1&amp;" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="100%" height="100%"></embed>
</object>
</div>

Thanks