3/08/2012

WPtouchでYoutubeなどの埋め込み動画が潰れるのを防ぐ方法

いつからかわかりませんが、歩き方のブログをスマホで見たら埋め込みのyoutube動画が細長く潰れた状態でした。縦幅が数ピクセルしかありませんでした。

スマホのブラウザの問題かと思いましたが、モバイルシュミレーターから試しても同じだし。ソースを確認しても特に問題ありませんでした。

少し前に、cssをイジッたのでそのせいかと思い、WPtouchのstyle.cssを削除して試しに表示してみると、全く同じで動画が潰れた状態。

とりあえず、cssで動画の縦幅を設定したら正常に戻りました。でも、すぐ下の文章に動画が覆いかぶさっている状態なので、また変なことになっています。
でも、これで原因が特定できました。


どうやら動画を自動出来にdivで挟む機能が、WPtouchにあるようで埋め込みのタグが
<div class="fluid-width-video-wrapper">

というタグで囲まれています。WPtouchのせいか、youtubeの仕様変更か何かは不明ですが、高さが自動取得できずに細長くなってしまっていたのでした。

なので、cssにdiv.fluid-width-video-wrapper{height:250px}を加えたら、正常になりました。