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.

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.

• javascript
• jquery
• iframe
• dom-events

• What exactly you want to achieve? What should be the behavior of the page once I drag the divider on video? – Gagan Jaura Commented Oct 1, 2015 at 10:49
• I want to resize the a div which holds a youtube video with a draggable splitter, so the div should resize. However, if you go on top of the iframe the mouseup event is lost and you cannot stop the resize process. Basically the splitter sticks to your cursor – ajaali Commented Oct 2, 2015 at 13:03

4 Answers 4

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.

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

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

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.