0

上部に固定されたヘッダーがあり、コンテンツは単に下にスクロールされます。したがって、このヘッダーを通してコンテンツが表示されないようにするために、本体と同じ背景画像があり、これは修正されています。

すべてがうまく機能しますが、Chromeでは、コンテンツを上にスクロールしてYouTubeビデオを下に移動すると、ヘッダーに背景が含まれ、左に揃えて縮小します。上に移動すると消え、コンテンツが表示されます。サイト、それは私が望む方法ではありません。

これを防ぐ方法に関するアイデア：

以下のいくつかのコード：

 header{
   width:960px;
   position: fixed;
   top: 0px;
   margin:0 auto;
   padding:0;
   text-align:center;
   display: block;
   background: url('../imgs/Background_header.jpg') no-repeat top left fixed;
  }

コンテンツコンテナcss

  .content-container {
   width:960px;
   padding-top:230px;
   z-index:0;
   margin:auto;
   overflow: hidden;
  }

html：

   <div class="content-container">
    <header>
 <!-- header stuff -->          
    </header>
    <iframe width="560" height="315" src="......
    .. other stuff.

どんなアイデアでもありがたいです。また、これを作成するためのより良い方法があれば、それも素晴らしいでしょう。

ありがとう

編集：明確でない場合、コンテンツはヘッダーの下をスクロールし、YouTubeプレーヤーに到達すると、ヘッダーの背景画像が台無しになります。

4

3 に答える 3

1

これは、YouTube URL にwmode opaque または transparentを追加することで解決できます。

f.ex。このビデオを埋め込むには: http://youtu.be/qgnvbMwRaf8、取得する iframe は次のとおりです。

<iframe width="560" height="315" src="//www.youtube.com/embed/qgnvbMwRaf8" frameborder="0" allowfullscreen></iframe>

最初のパラメーターは、疑問符の前に追加できます。URL に wmode を追加するには、次のように src を変更します。

<iframe width="560" height="315" src="//www.youtube.com/embed/qgnvbMwRaf8?wmode=opaque" frameborder="0" allowfullscreen></iframe>

URL に既にパラメータがある場合は、アンパサンド (&) を前に付けて 2 番目のパラメータを追加できますが、html ( &amp;) f.exとして最適です。

<iframe width="560" height="315" src="//www.youtube.com/embed/qgnvbMwRaf8?embedded=true&amp;wmode=opaque" frameborder="0" allowfullscreen></iframe>

注: wmode=opaque と mode=transparent は、wmode=window よりも低速です。wmode=transparent は wmode=opaque よりも低速です。- wmode - ブラウザのレンダリング動作における意味は何ですか?

YouTube パラメータの詳細については、こちらを参照してください。

于 2014-03-06T05:24:21.197 に答える
0

ヘッダーの背景から「修正済み」を削除します。

「background：url（'../ imgs / Background_header.jpg'）no-repeat左上;」を試してください。理由はよくわかりませんが、うまくいきました。

于 2013-03-15T08:39:31.533 に答える
0

サイモン、iframeを次のように配置しようとしましたか：

position: absolute;
z-index: 9999;

もう1つ注意してください。Z-INDEX は、位置が定義されている要素にのみ適用されます。(相対、絶対、およびリストが続きます)。

お役に立てれば幸いです。

于 2012-08-09T18:04:54.460 に答える