きまぐれAWA's Life

アクセスカウンタ

zoom RSS ウェブリのスマートフォン版向けページのYouTube動画がおかしい

<<   作成日時 : 2011/02/09 12:05   >>

ナイス ブログ気持玉 1 / トラックバック 0 / コメント 4

今回はウェブリブログのスマートフォン版ページのお話(まじ)
まずはこちらの画像をご覧下さい。




※ウェブリの仕様上、同ページにiframeタグを複数使用するとフレーム内に別のものが表示される事があります
※動画がきちんと表示されない場合がありますが記事構成の関係上iframeを使わざるを得ない事をご理解下さい
※なお、表示がおかしな場合はページのリログできちんと表示されるようになることがあります



上の動画は、先に行われました第11回ブロガー大会の記念動画です(にや)
PC版で見ると特におかしなトコロは見あたらないと思います。
でも、この動画をiPhoneでスマートフォン版ページで見てみると…

画像


およよ〜(あれ)
なんか縦横の比率がとんでもないことになってますぞ(あせ)

しかも〜(あれ)
再生ボタンをポチッとしても、クルクルクルクルするだけでちっとも再生される気配がありません…?(こなた)
※ 時間をかけたり「YouTube」マークをタップしたりすると再生が始まることがあります。


どうやらこの現象、YouTubeで取得出来る埋め込みコードが変更されたことが原因のようです(まじ)
上の動画で使った埋め込みコードです。

<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/xaVQtmcFCUQ?rel=0" frameborder="0" allowfullscreen></iframe>



こちらの埋め込みコードは、iframeタグで書かれています。
iframeタグはエリア内に外部ページなどを表示する時に使うタグですが、実はiPhoneと相性がよくありません。
スマートフォンではiframeの高さの調整がチョー苦手だったりします…(むう)
上の動画では、横幅のサイズ調整は出来たけど高さ調整が出来なくてノッポさんになってしまったようです。


さて、このノッポさんの回避策ですが(まじ)

画像


とりあえずPC版ページで見るってコトくらい(気まずい)
PC版なら縦横の比率も正常ですし、再生も問題なく行えます。
ぶっちゃけ、この問題はスマートフォン自体の問題になりますので、
ウェブリのスマートフォン版ページをどうこうという訳にはいかないと思われます。


iframeタグで貼られた動画はダメですが、以前使われていた埋め込みコードを使えば問題はおこりません。
YouTubeで埋め込みコードを取得する際、新しいiframe版のものじゃなくて、古い埋め込みコードを貰ってくること。





こちらは古い埋め込みコードで表示している動画です。
この動画をiPhoneで見ると…

画像


スマートフォン版でもちゃんと表示されます。
こちらの埋め込みコードはこんな感じです。

<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/xaVQtmcFCUQ?fs=1&amp;hl=ja_JP&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/xaVQtmcFCUQ?fs=1&amp;hl=ja_JP&amp;rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>


上の埋め込みコードで使われている「<object>」「<param>」「<embed>」の3個のタグ。
こちらはウェブリのスマートフォン版ページで対応しているHTMLタグですので動画もきちんと表示されます。

こちらのタグは下の画像のように「古い埋め込みコードを使用する 」をチェックすると取得可能です。
「いろんな状況下で問題なく見ることが出来る」…というコトは見せる側が考慮すべきポイントかもしれません。

画像


そんなこんなで、うちのブログでは今後も古い埋め込みコードで動画の貼り付けを使っていくつもりです(まじ)
同ページ内で複数のiframe設置によるフレーム内のフォーカスが変になる問題も抱えてますし(気まずい)

Web関連って日々絶えず変化し続けていってますけど、その都度頭悩ましてくれるのが困りもの(しょぼ)
もちっと簡単簡潔スマートにいかないものですかねぇ(だって)



じゃ、また(ひょえ)ノ

|ω・)ノシ See you♪

|彡 サッ

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 1
ナイス

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(4件)

内 容 ニックネーム/日時
スマートホン買え替える時が来るのでしょうか(あせ)
その前に、娘の携帯を買わなきゃ(やるおうる)

合格する前から、機種決めてるんだもんね(まじ)
スマートホンでわないようだけどw
エネティ
2011/02/10 11:11
エネティさん、いらっしゃいませ(にこ)
スマートフォンって割とクセがありますけど、使ってみると結構面白いですね(ん)
Web系の遊びの幅が増えた感じです♪

娘さんは携帯楽しみにしてるでしょうね〜(*´艸`*)
mairis
2011/02/10 13:27
ほへぇぇ いつの間にか・・・YOUTUBEの埋め込みコード変わってたんですね

全く知らなかったですな(わぁ)
OK 古いコードの取得で載せるように気を付けますってか 取り合えず
マイページで設定してきたわ
れき
2011/02/13 04:28
れきさん、いらっしゃいませ(にこ)
iframeタグの変な動きはスマートフォン版ページに限ったことなので埋め込みコードはどちらがいいとはハッキリとはいえませんが(気まずい)
ウェブリの仕様の件もありますし、うちは古い方を使って行く予定です。
mairis
2011/02/13 10:21

コメントする help

ニックネーム
URL(任意)
本 文
  現在の閲覧者数:

* ぱにゃステ *

『ぱにゃステ』 customized by mairis
 
 
ふぉろーみー

ウェブリのスマートフォン版向けページのYouTube動画がおかしい きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる