Home > スポンサー広告 > Shadowbox応用:動画に実装させる


スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 Comments:-

Comment Form

 Trackback+Pingback:-

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/203-54f5e7d3
Listed below are links to weblogs that reference
スポンサーサイト from TRASH

Home > スポンサー広告 > Shadowbox応用:動画に実装させる

Home > IT Tips > Shadowbox応用:動画に実装させる


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を貼り付けておくだけで基本は実装できそうです。
スポンサーサイト

 Comments:0

Comment Form

 Trackback+Pingback:0

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/203-54f5e7d3
Listed below are links to weblogs that reference
Shadowbox応用:動画に実装させる from TRASH

Home > IT Tips > Shadowbox応用:動画に実装させる

Recent Comments
Recent Trackback
Feeds

↑Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。