Home > 20080530


20080530

Shadowbox応用:動画に実装させる

Shadowboxはサムネイル画像のオーバーレイ表示だけではなく、動画(YouTube/Flashなど)やWebページも実現可能なのです。そこで、今回はYoutubeを使って動画に適用させる手法を紹介したいと思います。

サンプルは以下の通りです。
※音声もでるので、ご注意ください。
世田谷花火大会

記述方法は、Youtubeに掲載されている動画の「埋め込み」部分に記載されているタグに着目します。
<object width="425" height="355">
<param name="movie" value="http://www.youtube.com/v/e0VKw1rhb_M&hl=ja"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/e0VKw1rhb_M&hl=ja" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed>
</object>
※本来のタグは、改行されていません

上記、赤文字部分を以下のように入れることで、Shadowboxに適用させることができます。
<a href="http://www.youtube.com/v/e0VKw1rhb_M" rel="shadowbox;width=425;height=355" title="世田谷花火大会" >世田谷花火大会</a>
まとめてみると、あまり画像と変わりありませんでした。アンカータグ内にrel属性を加えて動画URLを貼り付けておくだけで基本は実装できそうです。

Home > 20080530

Recent Comments
Recent Trackback
Feeds

↑Page Top