JQuery - resize or drag div using iframe inside

Question

Try resizing the div in this example -> http://jsbin.com/ixesak/edit#preview


The cursor moves around Youtube-Player (when resizing or dragging and dropping), and the result is that the resize function stops. Hope someone can help me.

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> 

update: Solution, but maybe not the best?
http://jsbin.com/ixesak/7/edit

Answer 1

drag and drop iframe example

make iframeFix an add-on over iFrame, as the iframe accepts mouse events. Set the width and height of the iframeFix so that the resizing handle is visible and creates the other necessary css staff as you need.

 <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

According to this thread

Here's what worked for me

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