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の両方とも表示すらされなくなるという状態になるということです。

回答No.2

zabiora

状況が詳しくわからないので何とも具体的に答えにくいのですが、一つ思い当たるところを挙げておきますと、lightbox.jsのstart()メソッド内で行っている

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

という処理が関係しているかもしれません。

補足

回答有難うございます。

YOUTUBEもlightboxも各単独で使用する分には表示できるのですが、同時に同一ページに表示するとページが表示されないという現象が起きます。自分はJavaScriptは詳しくなく、lightboxの場合、公式ホームページのlightboxの使用方法をそのまま利用させて頂いていて表示している状態です。

最近、YOUTUBEがHTML5のフラッシュ技術を動画に取り入れているようなのですが、たまにYOUTUBE単独のページでもページが表示されない現象が起きることがあります。YOUTUBEの掲載方法は、単に動画ページにあるタグをHTMLに埋め込むだけです。

回答者様のお答え頂いたlightbox.jsのstart()メソッド内で起こってことをどう解決すればよいのかわからないのですが宜しければご回答の方を宜しくお願い致します。

回答No.1

yyr446

YouTube動画をlightboxでフォーカスして表示さようとしているのでしょうか？
だとすると出来ないと思います。
情報が古いかもしれませんがlightboxのサポートのページに
Can I display flash, video, or other content using the script?
Sorry, photos only. For other content, google for Lightbox modifications or try an alternative script such as Cody Lindley's
と書かれています。
同様のライブラリーとして
Shdowboxとかthickbox(jqueryベース)とかがあります。

shdowboxはyoutube大丈夫です。
http://www.shadowbox-js.com/index.html

http://jquery.com/demo/thickbox/

補足

ご丁寧な回答有難うございます。

動画をYOUTUBEで画像をlightboxで
表示させようとしましたが非表示になります。
使用しているのはFC2の無料ホームページで、
YOUTUBEとlightboxに対応しています。