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

Question

我正在开发 fiddle我想在 YouTube 视频上调整图像大小/拖放图像。

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

我为了实现上述 fiddle 而使用的 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 图片 的大小。目前，我似乎无法快速调整图像大小。

Answer 1

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

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

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

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