大量動画でも軽い!YouTubeサムネイル作成ツール

YouTubeの動画はブログなどに簡単に貼り付けることができますが、一つのページに大量の動画を貼り付けると表示が重くなってしまいます。

ThumbTubeは、YouTube動画のサムネイルを作成し、サムネイルがクリックされてから動画を読み込むことで、表示を軽くするツールです。

また、以下のブックマークレットをYouTubeのページで実行することでも、サムネイルを作成できます。以下のリンクを「お気に入りに追加」してご利用下さい。Google Chromeなどでは、ブックマークの「編集」から手動で追加します。

ThumbTube

設定

プレビュー

サムネイルをクリックすると動画が読み込まれます。

コード

貼り付けるコードは3つあります。

下の二つは、一度head内に設定すれば後はいくつ動画を貼り付けてもOKです。

html

下のコードをサムネイルを表示したい箇所に貼り付けて下さい。

javascript

下のjavascriptコードを<head>~</head>の中に貼り付けるか、以下のリンクを「名前を付けて保存」し、外部javascriptファイルとして使用して下さい。または、既に使用しているjsファイルにリンク先の内容をコピペで追加してもOKです。

複数の動画を貼る場合でも、以下のソースはhead内に一度貼るだけでOKです。

thumb_tube.js

css

下のcssコードを<head>~</head>の中に貼り付けるか、以下のリンクを「名前を付けて保存」し、外部cssファイルとして使用して下さい。または、既に使用しているcssファイルにリンク先の内容をコピペで追加してもOKです。

複数の動画を貼る場合でも、以下のソースはhead内に一度貼るだけでOKです。

thumb_tube.css

リンク

よろしければリンクをお願いします。

サンプル

[PV] Perfume 「Spring of Life」