3

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

対同じコード

http://www.aintnobodymusic.com/monkey

問題: フィドルでは、すべてが正常に機能します。上記の画像はすべての場合に pointer-events: none によって無視され、クリックはその下にあるものすべてに渡されます。下の 2 つのイベント リスナーを介してこれを伝えることができます。上の 4 つは youtube の iframe 埋め込みであるため、クリックするとビデオが開始されるため、わかります (これらはライブ ビデオなので、必ず中央をクリックするか、ユーチューブに飛ばされる場合があります）。

だから、すべて順調です... サイトに載せるまで。ローカル環境とホスト環境の両方で 4 回試しましたが、常に同じ結果が得られます。下の 2 つは期待どおりに動作し、クリックは画像​​を介して下の div に移動します。ただし、iframe (youtube) は、ピクセルの 100% が上の画像で覆われている場合、クリックを登録しません。ピクセルが 1 つでも露出している場合は、正常にクリックスルーします。これが「短い」セットがある理由です。これらのビデオの上の画像は、下のビデオよりも正確に 1 ピクセル狭くなっています。

ただし、firefox では、100% カバーされているビデオはトリガーされません。これまでにテストした Chrome と Safari では正常に動作しますが、firefox では動作しません。

この問題についての言及はどこにもありません。

ここで何が起こっているのかを絞り込むために、テストごとにテストを行いました。

これはユーチューブの問題ですか？ファイアフォックスの問題？iframeの問題？iframe に origin タグがないことと関係があるのでしょうか? おそらく、ドキュメントの head と fiddle の構成に何らかの違いがありますか? 私はcodepenでも同様のことを試しましたが、問題なく動作します(クリックパススルー)...サイトに配置してfirefoxを使用するまで。

追加するために編集：codepenでも単純化されたケースを実行しただけで、クリックはそこでうまくいきますが、私がホストしたときはうまくいきません：

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>

そして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;
}
4

1 に答える 1