スポンサーリンク
YouTubeは自分も好きですが、ブログの中にたくさん貼ると重いです。ひとつのページにいくつもあると、そのページを開くのが大変です。
本当は、数を少なくするのがイチバンなんですが、どうしてもたくさん貼りたいというときに、ビデオではなくボタンにしたらどうだろう？ボタンを押したものだけ、そのビデオを表示するようにすれば少しは軽くなるのではないか？ということで作ってみました。
これはファンブログだけでなく、どのブログでも使えます。ただ、ビデオが表示されているから、見てみたくなるというのはあると思うので、使わない方がいい場合が多いとは思います。と、身も蓋もないことを言ってみる。
サンプル
2000年に一度だけ、この世に現れる、愛の戦士。
今日も元気に、梨汁ﾌﾞｼｬー:;.,*+
こころを込めて踊ります♪
ふなっしーのcall me maybeを見る！
使い方
まずはYouTubeへ行き、通常のソースを取ってきます。最初に「共有」をクリック。そして「埋め込みコード」をクリックします。動画のサイズなどの設定をお好みに合わせたら、表示されている「埋め込みコード」をコピーします。
「埋め込みコード」を取ってきたら、この下の枠に、その「埋め込みコード」を張り付けてください。取ってきたのが正しいコードなら、貼り付け終わると、ボタンにするために「独自に生成されたコード」が表示されます。あとは、それをコピーして自分のブログの表示させたい場所に貼り付ければ完了です。
この下に表示したいYoutubeのソースを張り付けてください。
どなたでも、ご自由にお使いいただいて構いませんが、使ったらコメント欄に「使った」とだけ書いておいてください。
ソースコード
この下は、興味のある方だけご覧ください。生成されるソースコードは次のようになります。
<script type="text/javascript" src="http://api.dwm.me/js/youtube_show.js" charset="utf-8"></script> <script type="text/javascript">youtube.button(640,480,'http:\/\/www.youtube.com/embed/RI6svNFmRAQ');</script>
1行目のスクリプトで、外部の.jsファイルを読み込んでいます。その中身は以下のとおりです。
var youtube_class=function(){
this.count=0;
};
youtube_class.prototype.show=function(id,width,height,src){
document.getElementById(id).innerHTML='<iframe width="'
+width+'" height="'+height+'" src="'+src
+'" frameborder="0" allowfullscreen></iframe>';
};
youtube_class.prototype.button=function(width,height,src){
document.write('<input type="button" value="youtubeを表示" '
+'onclick="youtube.show(\'youtube_'+this.count+'\','
+width+','+height+',\''+src+'\');" /><br /><br />'
+'<div id="youtube_'+(this.count++)+'"></div>');
};
var youtube=youtube?youtube:new youtube_class();
本当は外部ファイルにせずに、そのままコピペしてもらいたいんですが、少し長いだけでヒルんでしまう方がいるので、貼り付けるソースを短くしたかった。それで外部ファイルにしています。
関連コンテンツ
スポンサーリンク