あっきぃ日誌

鉄道ブログのような技術系ブログのようななにか

MobileSafariでHTMLのプルダウンメニューの上にYouTubeの埋め込みが乗ってしまうのをどうにかする

地味に開発(?)が続いている自家製簡易はてなハイククライアントのkoHaikuですが、そういえばだいぶ機能が増えて簡易でなくなってました。
そんなkoHaikuですが、iPod touch(セケン的にはiPhoneがおおいでしょうが、ようはiOS)のMobileSafari上でプルダウンメニューを出すと、YouTubeの埋め込みが後ろに回りこまずにかぶってしまう問題がありました。こんなかんじ。

普通のFlashであれば、埋め込みのHTMLに「wmode=transparent」云々をやって、CSSでz-indexをつけてやれば何とかなるようですが、なんかダメっぽくて、ググってもうまく情報を見つけられませんでした。iPhone向けWeb製作Tipsは、ブラウザを指す名称が「iPhoneブラウザ」や「MobileSafari」とか一定せず微妙に検索しづらい気がします。
そんなことは置いといて、とりあえず、プルダウン時にembedタグをdisplay:noneにして消すことでごまかしました。プルダウンにかぶるものがなくなりましたが、後ろにもありません。プルダウンメニューを消すと、再度表示します。

ただ、そのままembedタグをdisplay:noneにしてしまうと、消えたところにHTML文書が詰められてしまって気持ちよくないので、同じ大きさのdivタグの中にYouTubeを埋め込んでやって、文書が詰められるのを防ぎました。
サンプルというかなんというか: http://8639.tk/5819/e/225872108040036265
display:noneで消さなくても何とかできる方法をご存知の方がいらっしゃいましたら、ぜひお知らせ下さい(おっ)。