Search

動画サムネイルにマウスオーバーで動画情報をツールチップ表示

2013/2/4

YouTubeから再生リスト内に含まれる全動画を取得(最大200件)して表示するサンプルです。 サムネイルにマウスオーバーするとCSS3で回転・ズーム効果をつけ、jQueryUIのツールチップで動画情報を表示しています。 画像のカラー⇔グレースケールの切り替えはCSS3で行っています。 あと、Lazy Loadでスクロールした時に次の画像を読み込むようにしています。

読み込んでいる再生リストは、http://www.youtube.com/playlist?list=PL92664796B8206B3Fを参照しています。

使用プラグイン、参考サイト

設置サンプル

http://phpjavascriptroom.com/youtube/tooltip/

設置イメージ設置イメージ

動画サムネイルを地球を一周しているように表示

2012/11/13

jQuery Roundaboutを使って、NASAのYouTube動画が地球を一周しているように表示するサンプル。

使用プラグイン、参考サイト

設置サンプル

http://phpjavascriptroom.com/youtube/roundabout/

設置イメージ設置イメージ

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women