CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap-3youtube
john
john

Reputation: 11709

How resize/drag/drop image over a youtube video?

I am working on a fiddle in which I want to resize/drag/drop an image over a youtube video.

In the above fiddle, I cannot resize the image at fast pace over the youtube video. I am not sure what are the reasons behind it. I can resize/drop/drag but not at a very fast pace.

The HTML/JS I have used in order to achieve the above fiddle is:

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


Problem Statement:

I am wondering what changes I should make in the HTML code so that I am able to resize the Google Image properly. At this moment, it seems like I am not able to resize the image at fast pace.

Upvotes: 0

Views: 214

Answers (1)

Ercan Peker
Ercan Peker

Reputation: 1662

youtube video complicates it, so create an overlay over video and make it visible when resize event starts, and hide when resize stops.

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

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

working code: https://jsfiddle.net/obn4yph0/

Upvotes: 2

Related Questions