ナビゲーションをページの上部に固定していますが、iframe が埋め込まれた YouTube ビデオをスクロールすると、ナビゲーション (オーバーレイまたはモーダル ウィンドウ div と同様) の上に表示されます。
その上にz-indexを設定しようとしましたが、役に立ちませんでした。
埋め込みオブジェクトに wmode="opaque" を設定して、これを古いスタイルの Flash 埋め込みで動作させることができることを発見しましたが、HTML 5 で動作することを好み、ビデオ埋め込みで特定の設定を要求する必要はありません。
正解は、wmode=opaqueをiframessrc値のYouTubeクエリ文字列として設定することです。
iframeには不透明属性はありません。許可される属性の完全なリストはここにあります： http ：//www.w3schools.com/tags/tag_iframe.asp
この更新されたjsfiddleには、HTML5 APIの埋め込みYouTubeメソッドのみが含まれており、不要な古いスタイルの埋め込みタイプとz-indexは除外されています。
http://jsfiddle.net/EB6gN/16/
動画の[再生]をクリックすると黒い画面が表示されます。これは、現在のYouTubeHTML5Flashフォールバックのバグが原因です。iframeのサイズが大きくなるとコントロールが表示されますが、プレーヤーが壊れています。その情報については、このSO投稿を参照してください：
https ：//stackoverflow.com/a/10560802/1195891
フレームの wmode を opaque または transparent に設定する必要があります。また、そのパラメーターを iframe の YouTube ビデオに追加する必要があります。
wmodeの詳細。