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

Search
Adsense

Calendar
« 2008/05 »
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
Categories
Tagcloud
Archives
Recent Comments
Recent Trackback
Feeds

↑Page Top