埋め込まれたビデオの作成バグ：固定トップヘッダ

Question

は私が

position:fixed; 
z-index:1000; 

でページの上部にあるメニュー要素を持っており、それは通常、任意の文句なしで、ページの上部にとどまります。しかし、いつでも私はページに埋め込まれたYouTube動画を持っている（その時に再生している必要があります）と思われます。固定メニューにはあらゆる種類の不具合があり、飛び回っています。これは一般的な問題ですか、埋め込まれたビデオは位置を妨害しますか？固定要素ですか？問題はChrome、Safariですが、奇妙なことにFirefoxではそうではありません。

このコンソールエラーは何か関係がありますか？ 安全でないJavaScriptが、URLがww.youtubeのフレームにアクセスしようとしました... URLがww.youtubeのフレームから...ドメイン、プロトコル、およびポートが一致している必要があります。

私はこの説明が非常に精巧ではないことを知っているので、ここではURL：Chronicle Video Sectionです。私は高校の学校の新聞サイトを作っていますが、私はこの1つの問題に悩まされています。動画の再生中に上下にスクロールしてみてください。ご協力いただきありがとうございます。それは私がそれを設定しているか、助けている場合、それは現在だけでユーチューブのURLとWordpressのあるワードプレスポストコンテンツのエントリの内容を引くことである

<div class="entry-content"> 
    <p> 
     <iframe... /> 
    </p> 
</div> 

：

div要素のiframeがでているがそのURLをそのdivに埋め込みます。

Answer 1

これはYouTubeのバグではありません。これは、固定位置項目の再描画に関連するWebkitのバグです。私はwebkitでバグを提出することをお勧めします。

今のところ回避したい場合は、ウィンドウのスクロールイベントをリッスンし、メニューのスタイル（幅、高さ、位置）を変更して強制的に再描画することをおすすめします。

Answer 2

私はまったく同じ問題を抱えていました。私は非常に簡単な解決策を見つけました。ユーチューブの動画のURLに

?wmode=transparent 

：次のパラメータを追加します。例：

<iframe width="560" height="315" src="http://www.youtube.com/embed/brg1H4BuII8?wmode=transparent&rel=0" frameborder="0" allowfullscreen></iframe> 

詳細here。

Answer 3

私は固定要素に

-webkit-backface-visibility: hidden; 
-webkit-transform: translateZ(0); 

スタイル規則を追加することが私のために狂気を整理ことがわかりました。