YouTubeの動画はブログなどに簡単に貼り付けることができますが、一つのページに大量の動画を貼り付けると表示が重くなってしまいます。
ThumbTubeは、YouTube動画のサムネイルを作成し、サムネイルがクリックされてから動画を読み込むことで、表示を軽くするツールです。
また、以下のブックマークレットをYouTubeのページで実行することでも、サムネイルを作成できます。以下のリンクを「お気に入りに追加」してご利用下さい。Google Chromeなどでは、ブックマークの「編集」から手動で追加します。
設定
プレビュー
サムネイルをクリックすると動画が読み込まれます。
コード
貼り付けるコードは3つあります。
下の二つは、一度head内に設定すれば後はいくつ動画を貼り付けてもOKです。
html
下のコードをサムネイルを表示したい箇所に貼り付けて下さい。
javascript
下のjavascriptコードを<head>～</head>の中に貼り付けるか、以下のリンクを「名前を付けて保存」し、外部javascriptファイルとして使用して下さい。または、既に使用しているjsファイルにリンク先の内容をコピペで追加してもOKです。
複数の動画を貼る場合でも、以下のソースはhead内に一度貼るだけでOKです。
thumb_tube.jscss
下のcssコードを<head>～</head>の中に貼り付けるか、以下のリンクを「名前を付けて保存」し、外部cssファイルとして使用して下さい。または、既に使用しているcssファイルにリンク先の内容をコピペで追加してもOKです。
複数の動画を貼る場合でも、以下のソースはhead内に一度貼るだけでOKです。
thumb_tube.cssリンク
よろしければリンクをお願いします。
サンプル
 | ［PV］ Perfume 「Spring of Life」 |