【jQuery】YouTube動画埋め込みに役立つプラグイン【PrettyEmbed.js】
YouTubeにアップロードした動画をホームページに埋め込んだりといったことはよくありますが、いちばん一般的なiframeを使っての埋め込みは、簡単ですけどタイトルとか、動画再生後に関連動画などが表示されてなんかダサくないですか?
そういった表示に関してある程度カスタマイズできるjQueryのプラグインがあったのでご紹介します。
PrettyEmbed.js
このPrettyEmbed.jsを使えばそういった表示が消え、ホームページ制作の際に埋め込んだとしてもスッキリします。
ダウンロード
こちらのダウンロードページから一式ダウンロードしてください。
使い方
使い方はとっても簡単です。jQueryとPrettyEmbed.jsを読み込ませてオプションを設定するだけです。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="jquery.prettyembed.min.js"></script> <script type="text/javascript"> $(function(){ $('#video').prettyEmbed({ videoID: 'IDを入れる' }); }); </script>
<div id="video"></div>
これで表示はされるようになります。videoIDはYouTubeのURLにある「v=」より後ろの文字列です。
オプションについて
色々なオプションが用意されています。
- previewSize・・・YouTube動画のプレビューサイズ。thumb-default、thumb-1、thumb-2、thumb-3、default、medium、high、hdを選べます。もし次にあるcustomPreviewImageのオプションを有効にした場合、こちらは無効になります。
- customPreviewImage・・・Custom defined preview image URLとありますがいまいちわかりません(笑)
- showInfo・・・動画上部にある動画情報(タイトルなど)を表示する(bool)
- showControls・・・動画下部の再生ボタンや音量などを表示する(bool)
- loop・・・ループさせるかどうか(bool)
- showRelated・・・動画再生終了後に関連動画を表示させるかどうか(bool)
- allowFullScreen・・・フルスクリーンを許可する(bool)
そのほかにもオプションが用意されているので公式ページをご覧ください。
サンプルデモ
サンプルはこちら
Tag : javascript
同じカテゴリーの別の記事
CONTACT
ホームページでの集客やWeb全般・スマートフォンアプリ制作などに関するご相談はお問い合わせフォームをご利用ください。
なお、ご相談いただいた後でも、弊社から営業などの売り込みを行うことは一切ありませんのでご安心ください。
お電話でのお問い合わせは、
0952-20-1501
平日10:00~18:00まで。セールス目的のお電話はご遠慮ください。