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

Question

我正在处理fiddle，我想在其中调整/拖放图像到 youtube 视频上。

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

为了实现上述小提琴，我使用的 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>

JS(JQuery)：

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

问题陈述：

我想知道应该对 HTML 代码进行哪些更改，以便能够正确调整 Google Image 的大小。目前，我似乎无法快速调整图像大小。

Answer 1

youtube 视频使其复杂化，因此在视频上创建一个叠加层，并在调整大小事件开始时使其可见，并在调整大小停止时隐藏。

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

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

工作代码：https://jsfiddle.net/obn4yph0/