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)

そのほかにもオプションが用意されているので公式ページをご覧ください。

サンプルデモ

サンプルはこちら

2017.12.08制作コラム

Tags:

関連情報