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.

Answer 3

The only way I found to stop iframe from eating the mouseup event is to hide the iframe when the mousedown event is fired on the splitter. This removes the issue completely, but i'm not satisfied with this answer.

see the working example in jsfiddle

HTML

<div id="container">
    <div id="top">
        <iframe class="col-md-12" id="player" frameborder="0" allowfullscreen="1" title="YouTube video player" width="200" height="100" src="https://www.youtube.com/embed/OnoNITE-CLc?        enablejsapi=1&amp;origin=http%3A%2F%2Flocalhost%3A8000"></iframe>
    </div>
    <div id="drag"></div>
    <div id="bottom"></div>
</div>

CSS

#container {
    width:200px;
    height:500px;
}

#top {
    height: 50%;
    width: 100%;
    background-color: green;
}

#bottom {
    height: 50%;
    width: 100%;
    background-color: blue;
}

#drag {
    height:10px;
    width:100%;
    background-color: grey;
    cursor: row-resize;
}

JS

$("#drag").mousedown( function (e) {
    $("#player").hide();
    $(document).mousemove( function (e) {
        newHeight = e.clientY
        $("#top").height(newHeight);
        $("#bottom").height($("#container").height() - newHeight);
        return false;
    });
    $(document).mouseup( function (e) {
        $("#player").show();
        $(document).unbind();
    });
});

Answer 4

That's how you can do:
1) Set Z-index of #drag element higher than iFrame like 99.
2) on mousedown event set height of #drag to 100% so that it'll cover iFrame.
3) Now mouseup event will work on iFrame. On mouseup event reset the height of #drag to initial height.
4) Do take care of #drag border/color while setting height to 100% so that it doesn't overlay in the complete screen.