fancyboxとIEとyoutubeとwmode=transparent｜jQueryプラグイン

  • 投稿日
  • 更新日
  • 著者 kngsmym
  • カテゴリー jQuery

案件でfancyboxを使用したのですが、同ページ内でyoutubeの動画を埋め込んだ場合、オーバレイで表示されるはずのコンテンツがIEではyoutubeの後ろに回ってしまい困っていました。

sample:デフォルトの場合
※IEでご覧になると、youtubeの動画がポップアップの上になっているのが確認いただけると思います。

googleさんで調べてみたところこれはFlashが常に最前面に表示されてしまうIEのバグ(仕様？)らしく、wmodeをtransparentにすれば解決するとのお答えがたくさん見つかりました。youtubeの場合はパラメータとしてURL末尾に&wmode=transparentと追加すればよいとのこと。下記はその内容が紹介されたページのひとつです。

参考ページ：音楽方丈記 – Lightbox系の画像スライドショーとYouTubeのiframe版埋め込みプレイヤーが重なるのを回避するには

それらを参考に実際にパラメータを設定してみました。以下がサンプルです。

sample:wmode=transparentを指定

確かに、ポップアップが動画の上にちゃんと表示されています。ところがIE9ではtransparentに不具合があり、動画を再生するとブラウザが停止してしまいます。これではちょっと問題があります。

そこでもう少し調べていると、lightboxの場合ですが、似たような状況への対策記事を見つけました。

Lightbox と Flashの共存 – BlueDiary

プログラムを改修して、ポップアップ表示のタイミングで特定のセレクタ（今回の場合youtube周り）にvisibility:hiddenを追加し、ポップアップを閉じるタイミングでvisibility:visibleにする、というもの。
この考え方でいけるのではないかと思い、自分でfancyboxのソースをいじってみて、なんとか動作させることができました。

sample:youtubeの表示/非表示処理を追加(visibility)

正直全部を理解することは無理だったのですが、以下の2箇所に処理を加えればいけました。

ポップアップ時の処理

jquery.fancybox.js　222行目～

open: function (group, opts) {
	if (!group) {
		return;
	}

↓　変更

open: function (group, opts) {
	$("任意のセレクタ").css('visibility','hidden');//追加した行
	if (!group) {
		return;
	}

クローズ時の処理

jquery.fancybox.js　418行目～

		F.transitions[ F.current.closeMethod ]();
	}

↓　変更

		F.transitions[ F.current.closeMethod ]();
		$("任意のセレクタ").css('visibility','visible');//追加した行
	}

このvisibilityという属性、chromeとかだと今回のケースではなぜか消えないので途中混乱し、その際に同じような働きのdispaly:noneを試したのですがこちらでも動作は問題ありませんでした。

IEだとどちらでもちゃんと消えるので両方問題ありませんが、異なる点としては非表示にした場合にvisibilityならボックスの幅と高さを残しますが、displayの場合はまるごと削除するので、後ろにコンテンツがある場合、上に詰めてしまいます。その場合はvisibilityの方がよさそうです。

なお、内容については十分な検証を行ったものではありませんので、参考にされる場合は自己責任ということでひとつ。