いつかエンジニアになりたい

Nothing is too late to start

はてなブログのサイドバーにYoutube貼り付ける

タイトル通りです。自分用のPlayerをブログに。Youtube自体がHTML5ですし、はてなブログのサイドバーは「html」、「javascript」挿入可能なので非常に簡単にできる。 

  1. 管理 -> デザイン

    f:id:berukann:20120619003349p:plain

  2. カスタマイズ -> サイドバー -> モジュールを追加

    f:id:berukann:20120619003406p:plain

  3. 追加したいYotubeの埋め込みコードを挿入 
    <iframeclass="youtube-player"type="text/html"width="200"height="200"src="http://www.youtube.com/embed/3cupbrwhNp0"frameborder="0">
    </iframe>
    ※ 注意点として、画像サイズを200px x 200pxより小さくし過ぎると
    「Video player is too samll.」って言って再生できないので注意。
    参考:YouTube API Blog: Minimum embeds: 200px x 200px

 

一曲だけじゃなくて複数の曲をランダムに流したいと思って検索してみた。

  • javascriptの配列に複数のyoutubeのURLを入れてランダムにする方法
    PARA MI GENTE「複数のyoutube動画を埋め込んでランダム再生する方法」 
  • サイドバー用にリストを作成し、リストを再生する方法
    Youtube ヘルプ
     
    1. [動画の管理] に移動し、[再生リスト] を選択します。
    2. 埋め込む再生リストを選択します。ページの上部にある [共有] ボタンをクリックします。
    3. [共有] タブをクリックして埋め込みコードをコピーします。
    4. そのコードをウェブサイトやブログに貼り付けます。

ブログ用のリストをyoutubeで作って再生するのが一番スマートなのかな。

プレーヤーのカスタマイズとかもできるみたいなので暇な時にカスタマイズしよう。

Youtube API