Jquery - Изменение размера или перетаскивание DIV с IFRAME внутри

Question

Try, чтобы изменить размер DIV в этом примере ->http://jsbin.com/ixesak/edit#preview

курсора перемещается над Youtube-плеер (в то время как изменение размера или перетаскивание) и результатом является то, что изменение размера функция останавливается. Надеюсь, кто-то может мне помочь.

JS

$(document).ready(function() 
{ 
    $('#test').draggable().resizable(); 
}); 

HTML

<div id="test" style="padding:20px; background-color:#f00;"> 
    <iframe class="youtube-player" type="text/html" width="100%" height="100%" src="http://www.youtube.com/embed/NugRZGDbPFU?autoplay=1" frameborder="0"></iframe> 
    </div> 

обновление: Решение, но, возможно, не самый лучший?
http://jsbin.com/ixesak/7/edit

Answer 1

drag iframe example

сделать iframeFix быть накладкой над плавающим фреймом, так как IFrame перенимает события мыши. Установите ширину и высоту объект на iframeFix, так что ручка для изменения размера может быть видна и сделать другие сотрудник необходимо Css, как вам нужно, чтобы они были ..

<div id="cont" style="height:1000px; width:1000px; background-color:grey;"> 
    <div id="test" style="padding:20px; background-color:#f00;"> 
     <div id="iframeFix" style="display:block; background:transparent; position:absolute; width:100%; height:100%; z-index:9999999;"></div> 
     <iframe class="youtube-player" type="text/html" width="100%" height="100%" style="z-index:2000!important;" src="http://www.youtube.com/embed/NugRZGDbPFU?autoplay=1" frameborder="0"></iframe> 
    </div> </div> 

Answer 2

Согласно этому thread

Здесь то, что сработало для меня

$('#Div').draggable({ iframeFix: true });