a:2454 t:3 y:1

スマホでShadowBoxプラグインを使ってYouTubeを表示

ShadowBoxプラグインを導入して、デフォルトでYouTubeを再生するとplayer=swfが使用され、
フラッシュプレイヤーを使われるので、iPhone,iPad,iPod touchなどフラッシュプレイヤーを積んでいないスマホは再生ができません。
（ポップアップはするが再生しない）

<a href="http://www.youtube.com/embed/fVqJOXgAdq4?autoplay=1" rel="shadowbox;player=iframe;width=640;height=385" title="ワルツ①" > <img src="http://i.ytimg.com/vi/fVqJOXgAdq4/0.jpg" height=210 width=280 border=0  align=right></a>

上記のように”player=iframe; ”を指定することで解決します。

なぜかYouTubeのアドレスが

<a href="http://www.youtube.com/v/fVqJOXgAdq4?autoplay=1>

の時はスマホから再生できませんでした。embedじゃないとダメみたいですね。

外国では結構記事があったのですが、日本語では解決がなかったのでメモメモ

複数のyoutube動画を表示した時に重くなるのを解決

yutubeの動画を大量に埋め込むと、読み込みに時間がかかります。
昨今のHP事情を考えると、これは困ります。表示が早い事にこしたことはありません。

なので、youtubeからサムネイルを取って来て表示し、その上にshadowboxを使用した<div>を貼り付けました。
しかし、これだと一見して画像と動画とが区別できません。
youtubeの様に再生ボタンが画像上に表示したいところです。

画像を重ねるテクニックが私にはあまりできなかったので、中途半端に。。。
CSSで再生ボタン画像をくっつければいいのかな・・

ちゃんとできたら再度、メモ載せます。