Mouseup event on document is not fired after hovering over iframe

Question

I am trying to get a div splitter working to resize two divs when I drag the splitter. I am trying to do this with mousedown, mousemove and mouseup events. It works like a charm until I add my youtube iframe. Once I hover over the iframe the mouseup event to $(document) is not fired, I'm guessing it is taken by the iframe. I have a working example in jsfiddle.

In the example the mouseup event is fired until your mouse moves over the iframe.

Answer 1

Here's a work around, ugly but should work, while dragging the mouse put an invisible div with a higher z-index on top of the iframe and when the dragging stops you remove it (or set a lower z-index to move it under the iframe). This div will catch your mouse events instead of the iframe.

Answer 2

You can apply the pointer pointer-events: none style to iframe during mousemove event.