youtubeの動画をポップアップで流したい。

質問

ホームページでyoutubeの動画をポップアップで流したいのですが、
うまくいきませんでした。

動画がバナーや文字の下に隠れてしまいます。

スタイルシートの関係だと思うのですが見よう見まねで作っているのでよくわかっていません。

テストで設置したページは　http://www.kumano-meisui.jp/test.html　です。

ポップアップのコードは下記のとおりです。

headに
　　<!-- ここから YouTubeポップアップ表示コード -->
　　<script type="text/javascript" src="video/js/mootools.js"></script>
　　<script type="text/javascript" src="video/js/swfobject.js"></script>
　　<script type="text/javascript" src="video/js/videobox.js"></script>
　　<link rel="stylesheet" href="video/css/videobox.css" type="text/css" />
　<!-- ここまで YouTubeポップアップ表示コード -->

bodyに
　 <a href="http://www.youtube.com/watch?v=4pvUaQ2gUMI" rel="vidbox 600 450" title="紀州熊野の命水"><img src="img/youtube1a.png" width="255" height="145" border="0"></a>

作成の時に参考にしたのは　http://php-sample.steppers-hi.net/jquery/001youtube/#run　
のVideoBoxというjQueryです。

如何したらよいのかよろしくお願いします。

回答No.1

ponsukez · ベストアンサー

JavaScriptやライブラリー（mootools、jQueryなど）は見よう見まね程度の私ですがCSSなら大体わかります。
サイトを見てみたところ。重なり順を指定するz-indexが指定してあります。
z-indexの後の数字を小さくする（今回は0）にすることで解決できそうです。
実際に変更する箇所は3箇所で以下のHTMLです。

<div id="hpb-nav" style="z-index: 3;">を
<div id="hpb-nav" style="z-index: 0;">に

<div id="banner" style="z-index : 4;">を
<div id="banner" style="z-index : 0;">に

<div id="toppage-news" style="z-index : 1;">を
<div id="toppage-news" style="z-index : 0;">に

変更してみてください。

お礼

早速の回答ありがとうござます。

変更してみたところうまく表示されました。

CSSをしっかりと勉強しないとだめですね。
これからjQueryともども勉強していきます。