YouTube動画の z-indexを有効にする
YouTube Player APIを使うシーンが増えました。
Appleのスマートデバイスだと、Flashベースが使えないので、
JSでのコントロールが必須になりますよね。
それに、一般的な埋め込みではなくて、
レスポンシブとして細かく伸縮を設定したいわけです。
===========
で、最近、
パララックスやグローバルナビの挙動など、
デザイン上でも、何らかの要素の表示が画面にとどまっているように、
コントロールしていることがあります。
この際、YouTube Playerの z-index が上に出てしまって、
( Windows PCなどで ) 格好悪くなる事があります。
※ なぜかMacでは出ないこともある。
===========
そういったデザインの際、プレーヤーのエリアにz-indexを付けたいときは、
playerVarsから指定ができます。
★ wmode : “transparent” を付け加えます。
★ デザインの任意のcss、z-indexを調整して確実にレイヤーを下げる。
playerVars: {
rel : 0, // 関連動画
showinfo : 0, // 動画情報
controls : 1, // コントローラー
wmode : “transparent” // z-indexを有効にする
}