YouTubeをプレビューさせるjQueryプラグイン「PreViewTube」

YouTubeの再生ボタンを押さずにプレビューさせられると興味を持ってもらえるかもしれません。
jQueryプラグインのPreViewTube.jsを利用すると簡単にアニメーション付きでプレビューできます。
YouTubeをプレビューさせるjQueryプラグイン「PreViewTube」サンプル

使用方法 PreViewTube.jsからファイルをダウンロード。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="previewtube.js"></script>
<script>
$(document).ready(function(){
$('.class名').PreViewTube({
'interval' : 500, //切り替え速度
'mode' : 'constant' //指定がないとマウスオーバーで動きます
});
});
</script>

次に表示させたいYouTubeのIDを取得します。
例えば、「Superfly - 愛をこめて花束を」 のURLは https://www.youtube.com/watch?v=gU5oN0KVofU となりますが、このv=の後のものがIDとなります。
最後に動かしたい動画を下記のようにします。
<img src="https://i.ytimg.com/vi/動画ID/1.jpg" width="150" class="class名"/>
ご存知の方も多いと思いますがYouTubeのサムネイルは末尾の数字を変えることで3つの画像を取得できます。
このプラグインでは、それを切り替えて利用しているものでした。

YouTubeをプレビューさせるjQueryプラグイン「PreViewTube」サンプル

sponsors

「YouTubeをプレビューさせるjQueryプラグイン「PreViewTube」」をシェアする

記事作成:
記事URL:

TOP > > > YouTubeをプレビューさせるjQueryプラグイン「PreViewTube」