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});});

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&hl=en_US&fs=1&">
  </param>
  <param name="allowFullScreen" value="true">
  </param>
  <param name="allowscriptaccess" value="always">
  </param>
  <embed src="http://www.youtube.com/v/JC7aWY5chyI&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="100%" height="100%"></embed>
</object>
</div>

Thanks