jquery - 同位体が iFrame へのクリックを台無しにするのはなぜですか?

Question

そこで、埋め込まれた YouTube ビデオ (YouTube は iFrame として提供してくれます) の上に静止画像を表示するためのちょっとしたハックをしています。アイデアは、ユーザーが静止画像 (上記のデモの大きな色付きのボックス) をクリックし、jQuery を使用して画像を非表示にし、iFrame を元の場所にドロップするというものです。ビデオを自動再生とブームに設定すると、再生が開始されます。

コードは単純で、次のビデオ ブロックのいくつかです。

<div class='videoblock yellow'>
    <div data-videoid="7ZLywQpPgcA" class='overlay'>Click this text to play</div>
    <div class="thevideo"></div>
</div>

次に、同位体を初期化するコードと、クリック時に YouTube ビデオにスワップするイベント ハンドラー:

$(function() {
    $('#iso').isotope({ itemSelector : '.videoblock' });   
});

// when the user clicks, hide the overlay, put the html code in for the iFrame and show it
$('.overlay').click(function() {
    vid = $(this).data('videoid');
    h = '<iframe width="435" height="265" src="//www.youtube.com/embed/'+vid+'?autoplay=1" frameborder=0 allowfullscreen></iframe>';
    $(this).hide(); $(this).next().show().html(h);
});

jsfiddle ライブ デモ: http://jsfiddle.net/pnoeric/MeL7a/7/

問題は、この手法は Chrome (Mac) と Safari ではうまく機能しますが、Firefox ではクリックしても YouTube のビデオに影響がないことです。一時停止ボタンが機能しません。YouTube では、私がボタンの上にカーソルを置いているのを確認できます。

どうしてこれなの？どうすれば修正できますか？:-)

（YouTube動画の上に静止画像を表示するためのより良い手法も受け入れています...）