概要 HTMLの記述でTwitter Cardsの記述の仕方によっては、困った表示になってしまうことが。動画を共有できるページのTwitter Cardsの設定には要注意です。

狙ってやったわけではないですが、アイドルマスター Live for You!の「隣に…」(双海真美版)の動画をTwitterに共有したら、動画のサムネイルがひどいことになった。


これは吹かざるを得ない(笑)。

20140119-隣に…のYouTube動画をTwitterに共有-01

デカすぎですよ!(゜Д゜)

何ピクセルあるんですか!!!!(測ったらプレイヤーの高さは780ピクセルでした)






●動画を再生するとどうなる?

それもこの動画16:9なのになんでそうなるの?

再生するとプレイヤーがタイムラインのカラムからはみ出てくるの?


と期待を込めつつ、真美の赤い鼻をクリックしました…。



…何も描画されないピンクで囲んだエリアは何なの…(´д`)

20140119-隣に…のYouTube動画をTwitterに共有-02

意味がわかりません!



●原因は何か?

原因は、真美のいたずらだったとしておくか…。



…ではなく、本当は動画のページのHTMLソースに書いてあるTwitter Cardsのタグ

<meta name="twitter:player:width" content="1280">
<meta name="twitter:player:height" content="720">

と書かれているところを読んでいるからですね。横幅ははみ出ていて見えない、高さははみ出ていないから720ピクセル+コントロール部分などで780ピクセルとなっていると考えられます。

Twitter Cardsの仕様に準じているので何の問題もありません。



●HiDPI環境はまだ先のことなのでは?と思いきや…

それにしてもYouTubeが想定している、Twitterのタイムラインのカラムの横幅が1280ピクセルって、どんだけHiDPI(高dpi)環境なんですか。

Mac使いが全員Retinaディスプレイではないですし、4Kモニターも、これから普及すると考えるべきでしょう。

YouTube側の意図として、なるべく高解像度でキレイに見せようというのは分かりますが、Twitterのタイムラインのカラムの横幅のピクセル数はそんなに大きくないので、もう少し考えるべきだと思います。



…と思いましたが、イマドキのフルHDなAndroid端末を横向きに持って、Twitterアプリで開いたら、タイムラインのカラムで横は1980ピクセル取れますね…。

Galaxy Note 3のTwitterアプリでツイートを見るとこんな感じでした。

20140119-隣に…のYouTube動画をTwitterに共有-03


全体像はこんな感じ。ピンクの線までがフルHD端末を横持ちしたときの下の端です。

なので1つのツイートが3画面分くらいあります。

20140119-隣に…のYouTube動画をTwitterに共有-04

でも実はこのプレイヤーっぽく見えている部分の画像はTwitter Cardsのタグでtwitter:imageのデータ(と再生ボタンの様なアイコン)を表示させているだけのようです。今回表示していると思われるのはこちら。

<meta name="twitter:image" content="http://i1.ytimg.com/vi/INKuuVdQcdU/maxresdefault.jpg">

なので、Android端末を縦持ちでも横持ちでも、横幅のサイズが自動的に変わります。(※iPhone版のTwitterアプリは横持ちしてもそもそも回転しません)


このため、モバイルのTwitterアプリでは「twitter:player:width」は関係無いようです。



まとめ

  • ウェブ版のTwitterではTwitter Cardsのプレイヤーのアイズ素直に解釈するのでプレイヤーのサイズに気をつけよう。
  • モバイル版のTwitterアプリ向けにtwitter:imageのデータをキチンと用意しよう。



それでは。よいYouTubeライフを。


●関連ページ



●こんな記事も読まれています



ブログ著者

笹川純一・jdash2000

名前:(Google+のプロフィール)

ケータイ好き。ガジェットが好きでiPhoneやらAndroidなどを所有。Surface Pro 2も持っている。

お仕事は印刷会社で営業・広報活動・DTPオペなどをしています。要は何でも屋さんです。最近は印刷関連より、自社のウェブサイトを制作するお仕事がほとんど。使用しているCMSはMovable Type。

ブログ著者について


コメントをどうぞ


サイト内検索