こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

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です。



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

投稿日時 - 2014-03-26 22:33:54

QNo.8530182

-t-

すぐに回答ほしいです

質問者が選んだベストアンサー

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;">に

変更してみてください。

投稿日時 - 2014-03-28 07:21:42

お礼

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

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

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

投稿日時 - 2014-03-28 11:37:25

このQ&Aは役に立ちましたか?

11人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問