Javascript 如何在youtube视频上调整图像大小/拖放？

我正在制作一个我想在youtube视频上调整大小/拖放图像的程序

在上面的提琴中，我无法在youtube视频上快速调整图像的大小。我不知道背后的原因是什么。我可以调整大小/拖放，但速度不是很快。

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

为了实现上述功能，我使用的HTML/JS是：

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>

问题陈述：

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

---

我想知道我应该在HTML代码中做些什么更改，以便能够正确地调整

谷歌图像的大小。此时，我似乎无法快速调整图像的大小
 youtube视频使其复杂化，因此在视频上创建一个覆盖，并在调整大小事件开始时使其可见，在调整大小停止时隐藏

$('#image').resizable({
start: function( event, ui ) {
 $('#overlay').show();
},

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

工作代码：
youtube视频使其复杂化，因此在视频上创建一个覆盖，使其在调整大小事件开始时可见，并在调整大小停止时隐藏

$('#image').resizable({
start: function( event, ui ) {
 $('#overlay').show();
},

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

工作代码：
@ErcanPerker嘿，你做了什么。这就是我想要的。太棒了，我接受你的答案。现在，我还有一个类似的问题，这是我研究这个问题的主要原因。在你的小提琴中，假设我把
谷歌图像放在一个家伙的鼻子上
，如果我调整浏览器窗口的大小，
谷歌图像似乎不会停留在鼻子上
。你们明白我的问题了吗？你们在吗？当调整大小和拖动停止时，你们可以存储相对于视频宽度和高度的x，y坐标和图像宽度。然后在调整窗口大小时，你可以计算新的宽度和相对于新视频大小的坐标。你能给我更多的指针吗？我们如何在代码中实现它？@ErcanPerker嘿，你做了什么。这就是我想要的。太棒了，我接受你的答案。现在，我还有一个类似的问题，这是我研究这个问题的主要原因。在你的小提琴中，假设我把
谷歌图像放在一个家伙的鼻子上
，如果我调整浏览器窗口的大小，
谷歌图像似乎不会停留在鼻子上
。你们明白我的问题了吗？你们在吗？当调整大小和拖动停止时，你们可以存储相对于视频宽度和高度的x，y坐标和图像宽度。然后在调整窗口大小时，您可以计算新的宽度和相对于新视频大小的坐标。您能给我更多的指针吗？我们如何在代码中实现它？