colorbox - iframeでYoutube使う時の諸注意

GitHub Edit Page
この記事は公開から1年以上が経過しています。内容が一部古い箇所があります。

経緯

colorbox で YouTube 動画をモーダルギャラリーで見せるみたいな流れになった。

やり方は以下の感じ。

<p>
  <a href="https://www.youtube.com/embed/00000000" class="colorBox">
    <img src="~~" alt="" />
  </a>
</p>
// 事前にjquery.jsとcolorbox.js読み込んでおく
$('.colorBox').colorbox({
  rel: 'colorBox',
  iframe: true,
  width: 640,
  height: 480,
  fixed: true,
  top: '20%',
});

概ね順調に実装できてたけど Win7 の IE11 で動画が表示されてから「次へ」「前へ」「閉じる」ボタンが見えなくなった。おそらく被さってたためと思われる。

z-index で弄ってみたが効果なし。iframe の遅延読み込みでもまったく効果がなかったのでどうしたもんかと悩んでた。

解決策

iframe で表示させるのでその辺で調べてみたら以下の記事にぶち当たった。

IE で埋込み YouTube が最前面に表示される - knowledge base

どうやら読み込み先リンクに「?wmode=transparent」をつければ解決するとのこと(パラメータがすでに付いている場合は?を&へ変更する)

つまり上記の HTML を以下のように変更

<p>
  <a
    href="https://www.youtube.com/embed/00000000?wmode=transparent"
    class="colorBox"
  >
    <img src="~~" alt="" />
  </a>
</p>

これで見れた。IE7~9 くらいの出来事かと思ってたけど普通に IE11 でも起こってたのでそういう問題でもなさそうだった。

変に疲れた。iframe でいい思い出まったくないので早く廃れて欲しい。こちらからは以上です。

Colorbox - a jQuery lightbox

アーカイブ記事のため、内容に関する更新依頼は受け付けておりませんが、誤字や脱字などありましたらご連絡ください。

この記事に関する修正依頼
アーカイブ一覧へ戻る