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/

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

1 个答案: