ボタンでYouTubeの動画を表示させる

スポンサーリンク


YouTubeは自分も好きですが、ブログの中にたくさん貼ると重いです。ひとつのページにいくつもあると、そのページを開くのが大変です。

本当は、数を少なくするのがイチバンなんですが、どうしてもたくさん貼りたいというときに、ビデオではなくボタンにしたらどうだろう?ボタンを押したものだけ、そのビデオを表示するようにすれば少しは軽くなるのではないか?ということで作ってみました。

これはファンブログだけでなく、どのブログでも使えます。ただ、ビデオが表示されているから、見てみたくなるというのはあると思うので、使わない方がいい場合が多いとは思います。と、身も蓋もないことを言ってみる。

サンプル

船橋市の梨の妖精ふなっしー♪
2000年に一度だけ、この世に現れる、愛の戦士。
今日も元気に、梨汁ブシャー:;.,*+
こころを込めて踊ります♪

ふなっしーのcall me maybeを見る!

使い方

まずはYouTubeへ行き、通常のソースを取ってきます。最初に「共有」をクリック。そして「埋め込みコード」をクリックします。動画のサイズなどの設定をお好みに合わせたら、表示されている「埋め込みコード」をコピーします。

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();

本当は外部ファイルにせずに、そのままコピペしてもらいたいんですが、少し長いだけでヒルんでしまう方がいるので、貼り付けるソースを短くしたかった。それで外部ファイルにしています。


関連コンテンツ

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください