отаю надиграть на скрипке в котором я хочупостоянно перемещать / изменять размер изображения (само изображение с изменяемым размером / перетаскиваемым изображением) поверх видео при изменении размера браузера.

Фрагменты кода HTML / CSS / JS, которые я использовал:

HTML:

<div id="wrapper" style="display:inline-block">
    <img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>

CSS:

.overlay {
  position:absolute;
  width:100%;
  height:100%;
  background:red;
  opacity:.5;
  display:none;
}

JS:

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

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

Постановка задачи:

Мне интересно, какие изменения я должен сделать в коде JS выше, чтобывсякий раз, когда я изменяю размер браузера, перетаскиваемое / изменяемое изображение также должно постоянно перемещаться.

Например: предположим, я помещаюGoogle изображение поверх носа парня в полноэкранном режиме и если я изменю размер окна браузера,Google изображение, кажется, не остается над носом как показано на скрипкеhttps://jsfiddle.net/obn4yph0/embedded/result