YouTubeAPIYouTubeの再生リストを使ったサンプル
動画サムネイルにマウスオーバーで動画情報をツールチップ表示
2013/2/4
YouTubeから再生リスト内に含まれる全動画を取得（最大200件）して表示するサンプルです。 サムネイルにマウスオーバーするとCSS3で回転・ズーム効果をつけ、jQueryUIのツールチップで動画情報を表示しています。 画像のカラー⇔グレースケールの切り替えはCSS3で行っています。 あと、Lazy Loadでスクロールした時に次の画像を読み込むようにしています。
読み込んでいる再生リストは、http://www.youtube.com/playlist?list=PL92664796B8206B3Fを参照しています。
使用プラグイン、参考サイト
- jQuery
- jQuery UI（tooltip）
- Lazy Load Plugin for jQuery（スクロール量に合わせて画像を読み込み）※MIT
http://www.appelsiini.net/projects/lazyload - jQuery Raty - A Star Rating Plugin（星レーティング）※MIT
http://wbotelhos.com/raty/
設置サンプル
http://phpjavascriptroom.com/youtube/tooltip/
設置イメージ動画サムネイルを地球を一周しているように表示
2012/11/13
jQuery Roundaboutを使って、NASAのYouTube動画が地球を一周しているように表示するサンプル。
使用プラグイン、参考サイト
- jQuery
- jQuery Roundabout ※ターンテーブル風のカルーセル
http://fredhq.com/projects/roundabout/ - Parallax Effect Using Only CSS With No JavaScript ※CSS3動く背景
http://jasonlau.biz/home/css/parallax-effect-using-only-css-with-no-javascript - 地球素材 http://superiorgamer.deviantart.com/art/Space-Resource-78321878
- 背景素材 http://www.wwvalue.com/design/ps/computer-and-lcd-led-display-templates-psd.html
設置サンプル
http://phpjavascriptroom.com/youtube/roundabout/
設置イメージ