エントリー

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

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

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

また覚えがきでも一つ。

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

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

<object style="height: 390px; width: 640px;"><param name="movie" value="http://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="http://www.youtube.com/embed/AVt24Vij9jk?feature=player_embedded" frameborder="0" allowfullscreen></iframe>

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

<div class="youtube"><iframe src="http://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が野球場(?)で演奏してるの面白い動画...

大好きなレブとダグを従えてかっこいい還暦おじいちゃん...

ページ移動

他にもこんな記事があります


トラックバック

  • トラックバックはまだありません。

トラックバックURL

http://blog.spadive.com/trackback/1557

コメント

  • コメントはまだありません。

コメント登録

  • コメントを入力してください。
登録フォーム
名前
メールアドレス
URL
コメント
閲覧制限
「スパダイブ」をひらがなで(スパム対策)


正当なHTMLです! 正当なCSSです!

ユーティリティ

archive/過去ログ

No Data
ブックマークはありません。

page

  • ページが登録されていません。
072017/0809
S M T W T F S
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -