Youtube iframe not responding to clicks passed through image above with pointer-events: none

Question

http://jsfiddle.net/aintnobody/0L1yumpe/

vs the same code on

http://www.aintnobodymusic.com/monkey

The issue: On the fiddle, everything works as it should. The image above in all cases is ignored via pointer-events: none, and the click passes through to whatever is underneath. We can tell this via the event listener for the bottom two, and since the top 4 are youtube iframe embeds, we can tell because the click starts the video (these are live vids, btw, so be sure to click in the center or you may be taken to youtube).

So, all is well... until I put it up on a site. I've tried four times in both local and hosted environments, and I always get the same result: The bottom two behave as expected, and the click goes through the image to the div below. However, the iframe (youtube) does not register the click IF 100% of it's pixels are covered by the image above. If even one pixel is exposed, it clicks through as it should. This is why the "short" set is there. The images above those videos are exactly one pixel narrower than the video underneath.

In firefox,however, the videos that are 100% covered will not trigger. It works fine in Chrome and Safari that I have tested so far, but not in firefox.

I can't find a single mention of this issue anywhere.

I've done test after test to narrow down what is happening here.

Is this a youtube issue? A firefox issue? An iframe issue? Could it have to do with the lack of an origin tag on the iframe? Perhaps some difference in the configuration of my document's head vs fiddle? I've tried similar on codepen as well, and it works just fine (clicks pass through)... until I put it up on a site and use firefox.

edited to add: just did simplified case on codepen as well, and clicks go through just fine on there, but not when I host:

http://codepen.io/oompaLoompa/pen/QwqRER

<iframe 
    class="video full jpgOverVideoFull"
    width="200" 
    height="150" 
    src="https://www.youtube.com/embed/DEzREJbln-o"
    frameborder="0" 
    allowfullscreen>
</iframe>

<div class="image full jpgOverVideoFull"
     style="background-image:url('http://images.nationalgeographic.com/wpf/media-live/photos/000/247/cache/proboscis-monkey-in-tree_24704_600x450.jpg');"
>jpg full vid</div>

<iframe 
    class="video full pngOverVideoFull"
    width="200" 
    height="150" 
    src="https://www.youtube.com/embed/DEzREJbln-o"
    frameborder="0" 
    allowfullscreen>
</iframe>

<div class="image full pngOverVideoFull"
    style="background-image:url('http://www.whaleoil.co.nz/wp-content/uploads/2012/05/monkey.png');"
>png full vid</div>

and the css:

.video, .image, {
    height:150px;
    position: absolute;
    font-size:30px;
    color:#F2F;
    text-align: center;
}
.image {
    z-index:1;
    pointer-events: none;
    background-size: cover;
}

.jpgOverVideoFull {
    top:20px;
    left:20px;
}

.pngOverVideoFull {
    top:190px;
    left:20px;
}

.full {
    width:200px;
}

.short {
    width:199px;
}

Answer 1

Since no one else is offering any input, I'll offer thee best I've been able to find in the hopes that it might be helpful to someone else, or that someone might pick up from here and run with it. The following is at least A solution, though I wouldn't call it THE solution:

The iframe will not trigger if it is completely opaque in front. One blank pixel will do, or a less than opaque image. It has nothing to do with image type. Could be background color. It it is fully opaque, and covers every pixel, pointer-events: none will not work.

So, only solution I've found is to either leave a tiny portion uncovered (looks bad), or make semi-transparent (extra processing). Since this seems so far to only be an issue in Firefox, I tried using css of:

opacity: 1;
-moz-opacity: .9899;

hoping that it would render as fully opaque everywhere else, but then do translucent in ff only. Unfortunately, my version is higher than whichever requires prefix, and it takes the unprefixed version and ignores prefix.

(the .9899 is because it does not work at opacity of .99 or above although I'm not sure how many digits are either practical or actually used)

so, since I don't want it translucent if it doesn't have to be, best I've been able to figure (without needlessly slowing down other browsers) is:

@-moz-document url-prefix() {
    #elementId {
        -moz-opacity: .9899;
        opacity: .9899;
    }
}

It works, but it makes me cringe. It makes me wonder what other browser quirks may be around the corner that I haven't been able to test for yet like older IT, Opera Mini, etc. Mainly, I don't like it because it doesn't answer the larger question: WHY does a fully opaque div over a yt iframe click-through with pointer-events: none in EVERY fiddle, pen, etc, but then NOT click-through on site (hosted or local)

There is another and probably more important distinction to be had there. Please chime in if you have any clue as to what that might be.