YouTubeとlightboxをHTMLに埋め込むとページが非表示に

質問

YouTubeとlightboxをHTMLに埋め込むとページが非表示になる

ホームページを作成しているのですが、
YouTubeとlightboxを同時に導入すると、
そのページが非表示になってしまいます。

尚、YouTube単体、lightbox単体では
このような不具合は発生しないようです。
原因がわかる方いらっしゃいましたら、
ご回答宜しくお願い致します。

回答No.3

zabiora

うーんHTML5のフラッシュ技術が問題の原因だとしたら私には手に余る問題ですね。といってもjavascriptも学習し始めて半年足らずなのですが(汗)。

＞回答者様のお答え頂いたlightbox.jsのstart()メソッド内で起こってことをどう解決すればよいのかわからない

まず説明しておきますとstart()メソッドというのはlightboxの起動時(画像等をクリックして画面が暗転するタイミングです)に実行されるもので、そのなかの

$$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });

この1文で行っているのは、ページに埋め込まれている全ての<select>,<object>,<embed>タグを非表示にするという処理です。
よって、lightboxを起動しているときにyoutubeの埋め込み部分が見えなくなるのは正常な仕様であるといえます。なぜならyoutube動画の埋め込みは<object>タグによって行っているからです。しかしlightbox.jsにおいては画像を見るモードを終了して、また画面が明るくなりページの状態が元に戻った時にはまた<object>タグが表示されるようになっています。

よって、lightbox.jsが起動されたとき(暗転してるとき)にのみyoutubeが表示されているならlightboxのコードによる問題で、そうでない場合は他の要因が存在しているものと思われます。

補足

回答有難う御座います。
すいません。質問の説明不足でした。

YOUTUBEとlightboxを同時にHTMLに埋め込み、そのWEBページそのものを表示すると、そのWEBページ全てが背景画像のみになる、もしくは「ページが見つかりません」のようなエラーになるというものです。つまり、YOUTUBEとlightboxの両方とも表示すらされなくなるという状態になるということです。