I have a page with an embedded youtube video, and I'm trying to implement a custom overlay where you can define areas using a resizable and draggable <div> (using JQuery UI).
When dragging the <div> in other areas of the screen, it's perfectly responsive, but when over the video (embedded using the IFrame API, incase it matters), if you move the mouse at anything other than a crawl, it will regularly 'lose its grip' on the resize handles or the move handle. This is the case in both IE and Chrome.
JSFiddle here: http://jsfiddle.net/MfZes/1/ (draggable box is below the youtube frame)
Does anyone know why this is, or if it's avoidable?
Thanks in advance.
I've done this before.
You can hook onto the dragstart, resizestart, dragstop and resizestop events of jquery ui's resizeable and draggable plugins.
Put the video in a container div. Alongside the video, insert another div which will act as an overlay. Set the width and height to 100%, position it absolutely and set the display to hidden.
When the resize/drag start events fire, show the overlay div. When they stop, hide it. (You need to hide it as you still want to be able to interact with the video when you're not resizing or dragging.