Use a jquery UI slider to control the resizing of a youtube video.
- by HV
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
