Fullscreen video doesn't allow scrolling on firefox

Question

I'm using the fullscreen.js script and in one of my screens I will have a fullscreen Vimeo video. Apparently this will cause issues in FF and prevents me from scrolling up or down as soon as I reach the screen with the video. The issue was submitted to the GitHub page of the script but the author dismissed it as it's a FF issue (https://github.com/alvarotrigo/fullPage.js/issues/803).

I'm using all this with foundation CSS for the responsive video:

<div class="flex-video widescreen vimeo"> 
    <iframe src="<?php the_sub_field('video') ?>" 
        width="400" 
        height="225" 
        frameborder="0" 
        webkitAllowFullScreen 
        mozallowfullscreen 
        allowFullScreen></iframe> 
</div>

The bug is this one: https://bugzilla.mozilla.org/show_bug.cgi?id=779286 but I don't see that it was solved on FF 36 on Mac. The issue is not happening on chrome either.

Here is an example of the issue by someone else on the GitHub thread: http://jsbin.com/tunove/1/edit?html,output

Answer 1

The Issue:

The Mozilla bug you are looking at actually refers to the fullscreen mode API, an unrelated API that was fixed. I think the bug report you are looking for is this one:

Bug 1084121 - Mouse wheel event is captured by iframe and not propogated.

Steps to reproduce:

I have a div in which I manually capture mousewheel events, and use that to scroll the div. Inside of this div, I have an embedded youtube video, in an iframe.

Actual results:

While scrolling, if the mouse is over the iframe, scrolling no longer works, because all mouse events, including mouse wheel events, are captured by the iframe, and are not sent to the parent window.

Expected results:

The mouse wheel event should have been propagated to the parent window. This is the behavior in chrome and safari.

Since the iframe is on a different domain, there does not appear to be any feasible workaround for this.

This bug report is still open, and does not appear to be in the process of being implemented.

Also, according to the bug report, this behavior is not defined by any specification.

For what it's worth, I gave this bug report a vote to increase the importance. I agree, this is a user experience problem.

Workarounds:

Unfortunately, as far as directly fixing the wheel event issue goes, the suggestions in that GitHub issue are about all we have for cross-origin iframes. If the framed content were on the same domain or otherwise under your control, you could add another event listener inside the iframe, but Same-Origin Policy prevents this cross-domain.

The only options available to prevent the iframe from stealing the wheel events for cross-origin frames are:

• Cover most or all of the iframe with transparent divs.
• Use pointer-events: none; on the iframe. This will also prevent clicking on the video at all, so it has the same effect as covering the entire video with a transparent div.

Other Options:

This issue is apparently limited to the wheel events as it is possible to scroll a parent document while scrolling over an iframe.

<iframe src="data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3E%3Cp%3EScroll%20over%20this.%3C/p%3E%3C/body%3E%3C/html%3E" style="width: 100%; height: 100px;"></iframe>

<div style="background: red; width: 20px; height: 5000px;"></div>

fullPage.js is not structured this way, but if a parent element to the iframe were actually a scrollable element, it would be possible to listen for the scroll event and react to that.

It's a little shaky, but here's an example of something similar using the scroll event instead of the wheel event.

Example (JSFiddle):

var autoScrolling = false;
$('.wrap').on('scroll', function(e) {
    if (autoScrolling) {
        return;
    }
    //Get this element and find the number of children.
    var $this = $(this);
    var children = $this.children('.pane').length;
    //Find the height of each pane, and the current position.
    var paneHeight = this.scrollHeight / children;
    var position = this.scrollTop / paneHeight;
    var positionRound = Math.round(position);
    //Find the target position.
    var positionOff = position - positionRound;
    var toShow = null;
    if (positionOff < 0) {
        toShow = positionRound - 1;
    }
    else if (positionOff > 0) {
        toShow = positionRound + 1;
    }
    //If scrolling to a new pane, find the next one.
    if (toShow !== null) {
        autoScrolling = true;
        $this.animate({
            scrollTop: paneHeight * toShow
        }, {
            duration: 1000,
            complete: function() {
                setTimeout(function() {
                    autoScrolling = false;
                }, 500);
            }
        });
    }
});

html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.wrap {
    height: 100%;
    width: 100%;
    overflow: auto;
}
.pane {
    width: 100%;
    height: 100%;
    position: relative;
}
iframe {
    background: white;
    border: 0;
    outline: 0;
    display: block;
    position: absolute;
    width: 80%;
    height: 80%;
    left: 10%;
    top: 10%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="wrap">
    <div class="pane" style="background: red;">
        <iframe src="data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3E%3Cp%3EScroll%20over%20this.%3C/p%3E%3C/body%3E%3C/html%3E"></iframe>
    </div>
    <div class="pane" style="background: green;">
        <iframe src="data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3E%3Cp%3EScroll%20over%20this.%3C/p%3E%3C/body%3E%3C/html%3E"></iframe>
    </div>
    <div class="pane" style="background: blue;">
        <iframe src="data:text/html;charset=utf-8,%3Chtml%3E%3Cbody%3E%3Cp%3EScroll%20over%20this.%3C/p%3E%3C/body%3E%3C/html%3E"></iframe>
    </div>
</div>