【jQuery】Youtubeの動画サムネイルをアニメーション表示させる「PreViewTube.js」
Youtube動画のサムネイル4種をアニメーション表示させることができるjQueryプラグイン。マウスオーバーでアニメーションを再生させることもできるので、Youtubeへのリンクなどで活躍しそうです。
PreViewTube.js
Githubに公開されてますのでファイル一式をダウンロードしてください。
使い方はjqueryとダウンロードした「previewtube.js」を読み込ませます。
Java File
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="js/previewtube.js"></script>
以下のようにjavaで適用する要素とオプションを設定して、youtubeサムネイルのimgタグにjavaで指定したclassを設定します。
Java
$(document).ready(function(){ $('.preViewTube').PreViewTube(); // or $('.preViewTube-constant').PreViewTube({ 'interval' : 500, 'mode' : 'constant' }); });
html
<img src="https://i.ytimg.com/vi/動画ID/default.jpg" alt="" title="" width="150" class="preViewTube"/>
\ Webデザインに関するお役立ち情報を定期的に配信中 /
- 【jQuery】ロールオーバー時にテキストをシャッフルさせる「chaffle.js」
- 【jQuery】スクロールに合わせて要素を切り替える「Midnight.js」
- 手書き風SVGアニメーションを簡単に実装できる「vivus.js」
- 【jQuery】画像をハーフトーンに変換するプラグイン「Breathing Halftone」
- 背景にスクロールアニメーションを実装できる「Physics-Based Background Scroll Effects」
- WordPress対応のおすすめレンタルサーバー比較 ( 初心者向け )
- 無料で使えるフリーイラスト素材サイト(商用利用可)
- 無料で使用できるフリー画像・写真素材サイト(国内/海外)
- Webデザインの参考サイト | Web Design Clip - Webデザインクリップ -
- LP・ランディングページの参考サイト | Web Design Clip [L]