YouTubeやFlashを挿入したHTMLでのz-indexについて

HTML&CSS

YouTubeの重なり順を変えたい

YouTubeを挿入したHTMLではIEなどで position:fixedとしたブロック要素の上を通過してしまいます。z-indexを用いても重ね順は変わりません。
こんな風になります。(ブラウザの種類で表示はかわります)

z-indexとは

z-indexプロパティは、ボックスの重なりの順序を指定するものです。 これはpositionプロパティでstatic以外の値が指定されている要素に適用されるものです。

値の指定方法
重なりの順序を整数で指定し、0を基準として値が大きいものほど上になります。負の値も指定可能です。”auto” が指定されている場合の要素の重なり方は、文書のソース内であとに記述されている要素ほど上に重ねられて前面に表示されることになります。

YouTubeを挿入した要素の対策

この場合は以下のとおりにします。

動画ページで発行されたコードのiframe要素へ以下のプロパティを追加します。

frameborder=”0″ wmode=”Opaque”

更に発行されたコード内にあるURLの末尾に以下のパラメータを追加します。

?wmode=transparent

これで、z-index が効くようになります。

Flashの場合もこれと同様にz-indexが効かなくなります。この場合はobject要素の中に<param name=”wmode” value=”transparent”>を使用します。

スポンサーリンク

お勧め書籍

AI関連

Python

JavaScript

HTML CSS関連

統計学

HTML&CSS
スポンサーリンク
dororoをフォローする
IT工房|AI入門とWeb開発
タイトルとURLをコピーしました