Bigegg Lab

2011年 4月 5日

Custom YouTube Player Reload ? Scripts and Code

Youtube動画埋込みを独自デザインにしたい場合に使えるjQueryプラグイン「Custom Youtube Player」
Youtubeの通常のembedタグを埋めこむと、再生ボタンやらなにやらが付いていたりしますが、次のように、再生ボタンなしに出来ます。
これだけでも、デザインされたサイトには馴染みそうですね。バーがあるとデザイン全体が台なしというケースもありそう。



更に、カーソルを合わせると次のようにカスタマイズされたコントロールバーが現れます。



このコントロールバーは、JavaScript + CSS + 画像でデザインされており、ファイルをいじれば好きにカスタマイズすることも可能です。



サイトに動画を埋め込みたい、でも一目見ただけで、Youtubeとわかるあのインタフェースはちょっと・・・、という方はこちらを試してみるとよさそうですね。

JavaScript と CSSさえいじってしまえば、あとは、 $(element).customYtPlayer() ってやるだけで初期化が完了します。

また、こちらのチュートリアルでもカスタマイズ方法について触れられています。動画の上にオーバーレイしている再生ボタンもカスタマイズ出来るみたいです。



関連エントリ

• YoutubeのAPIをPHPから簡単に使える「PHPTube」
• 再生ボタン等も変更できちゃうYoutube操作jQueryプラグイン「jQuery Youtube Player」
• YoutubeやUstream等の動画埋め込みが超簡単になるjQueryプラグイン「jquery.mb.mediaEmbedder」

Youtube動画埋込みを独自デザインにしたい場合に使えるjQueryプラグイン「Custom Youtube Player」:phpspot開発日誌

実は、ニコニコ動画も初期はこのようなAPIを組み合わせてyoutube上に字幕を流していました。

1年前 | 固定リンク | 2011年 4月 5日 |