Как изменить размер / перетащить изображение на YouTube?

Question

Я работаю над скрипкой , в которой я хочу изменить размер / перетащить изображение на видео 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/