Estou trabalhando no fiddle no qual eu quero move / redimensiona constantemente a imagem (que é a própria imagem redimensionável / arrastável) sobre o vídeo quando o navegador é redimensionado.

Os trechos de código HTML / CSS / JS que usei são:

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();
  }
  }
);
});

eclaração @Problem:

Estou me perguntando que alterações devo fazer no código JS acima para que sempre que eu redimensionar o navegador, a imagem arrastável / redimensionável também deve ser movida constantemente.

Por exemplo: suponha que eu coloque ogoogle imagem sobre o nariz de um cara em tela cheia e se eu redimensionar a janela do navegador, o a imagem do Google parece não ficar sobre o nariz como mostrado no violinohttps: //jsfiddle.net/obn4yph0/embedded/resul