Question

Try to resize the DIV in this example -> http://jsbin.com/ixesak/edit#preview

The cursor moves over the Youtube-Player (while resizing or dragging) 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: A solution, but maybe not the best?
http://jsbin.com/ixesak/7/edit

Answer 1

drag iframe example

make the iframeFix be an overlay over the iFrame, since the iframe is taking over the mouse events. Set the width and height ot the iframeFix, so that the handle for the resize can be visible and make the other necessary css staff as you need them to be..

<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>