2/3/2012現時点で最良なfreoでyoutube埋込のiphone表示

色々検討てみたけれど、結局これに収まりました。

なんか無駄に(?)遠回りしたけど、一番単純な形に収まった感じです。

iflameでembedってのを入れるとちゃんとiphoneでも表示されることにやっと気づき...

また覚えがきでも一つ。

埋込コードをiframeに置き換え

まずyoutubeから持ってきた下記埋め込みコードそのもの

<object style="height: 390px; width: 640px;"><param name="movie" value="https://www.youtube.com/v/AVt24Vij9jk?version=3&amp;feature=player_detailpage" /><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /></object>

或いは

<iframe width="640" height="360" src="https://www.youtube.com/embed/AVt24Vij9jk?feature=player_embedded" frameborder="0" allowfullscreen></iframe>

から、videoIDの部分(=AVt24Vij9jk)を抜き出して下記iframeフォマットへ置き換える

<div class="youtube"><iframe src="https://www.youtube.com/embed/AVt24Vij9jk" title="20110825南紀白浜 権現崎海中" width="540" height="325"> </iframe></div>

置き換えの際の注意点は、

1.iframeのframeborderやallowfullscreenは削除

目的はhtml5でのvalid化

2.titleを追加して動画のタイトルをコピペ

これもhtml5のvalid対処

3.videoIDの前に/embed/を!

たぶんこれがiphone表示にきいてるんだと思う

4.width="540" height="325"指定

freoで作成の本ブログで、PC表示向けにうまく表示されるMAXサイズがこのあたり

5.iframeタグ全体をdivで囲みyoutubeクラスを与える

事前にiphone専用css(freo/css/iphone/common.css)に下記追加

.youtube iframe {
    max-width: 300px;
    height: auto;
    border: none;
}

しておくことで、iphone表示の際には横幅自動調整される。
300pxはfreoブログでiphone表示させた場合のmax値。これ以上大きくすると全体の表示が崩れる 。

結局この形が一番いいのではないかという結論になりました。

同様に2つほどテスト。

Yngwieが野球場(?)で演奏してるの面白い動画...