javascript - constantly move resizable/draggable image on the video when the browser is resize

Question

I am working on the fiddle in which I want to constantly move/resize image(which is itself resizable/draggable image) over the video when the browser is resize.

The snippets of HTML/CSS/JS code which I have used is:

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

Problem Statement:

I am wondering what changes I should make in the JS code above so that whenever I resize the browser, the draggable/resizable image should also constantly move.

For example: Let us suppose I place the google image over the nose of a guy in full screen and if I resize the browser window, the google image doesn't seem to stay over the nose as shown in the fiddle https://jsfiddle.net/obn4yph0/embedded/result

Answer 1

One idea is to position by percentage values relative to the container, rather than pixel values.

That way the positioning will be responsive, meaning that the position will be the same relative to the container regardless of the size of the container.

The calculations to convert pixels to percentages are based on this answer by peteykun.
Calculations are performed upon the stop events for both resizing and dragging.

And here's a JSFiddle (since the YouTube embed doesn't work here).

function convert_to_percentage($el) {

  var $parent = $el.parent();

  $el.css({
    left: parseInt($el.position().left) / $parent.width() * 100 + "%",
    top: parseInt($el.position().top) / $parent.outerHeight() * 100 + "%",
    width: $el.width() / $parent.width() * 100 + "%",
    height: $el.height() / $parent.outerHeight() * 100 + "%"
  });

}

$(function() {

  var $wrapper = $('#wrapper');
  var $overlay = $('#overlay');

  convert_to_percentage($wrapper);

  $wrapper
    .draggable({
      stop: function(event, ui) {
        convert_to_percentage($wrapper);
      }
    })
    .resizable({
      start: function(event, ui) {
        $overlay.show();
      },
      stop: function(event, ui) {
        $overlay.hide();
        convert_to_percentage($wrapper);
      }
    });
});

#wrapper {
  z-index: 100;
  position: absolute;
}

#wrapper img {
  width: 100%;
  height: 100%;
}

.embed-responsive {
  position: relative;
}

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<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 class="overlay" id="overlay" />
</div>

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