Q:

How resize/drag/drop image over a youtube video?

I am working on a fiddle in which I want to resize/drag/drop an image over a youtube video. 
In the above fiddle, I cannot resize the image at fast pace over the youtube video. I am not sure what are the reasons behind it. I can resize/drop/drag but not at a very fast pace. 
The HTML/JS I have used in order to achieve the above fiddle is:
HTML: 
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item"  src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

<div id="wrapper" style="display:inline-block">
    <img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>

JS(JQuery):
$(function() {
$('#wrapper').draggable();
$('#image').resizable();
});

Problem Statement:
I am wondering what changes I should make in the HTML code so that I am able to resize the Google Image properly. At this moment, it seems like I am not able to resize the image at fast pace. 

A:

youtube video complicates it, so create an overlay over video and make it visible when resize event starts, and hide when resize stops.
$('#image').resizable({
start: function( event, ui ) {
 $('#overlay').show();
},

stop: function( event, ui ) {
 $('#overlay').hide();
 }
 }
);
});

working code: https://jsfiddle.net/obn4yph0/

