読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:PrettyEmbed.jsを使ってVisualforceページにYouTubeの動画を埋め込んでみました

YouTubeの動画埋め込みを行う場合は、動画のページから埋め込みコードを取得してiframeを指定する形で埋め込むことができます。

f:id:tyoshikawa1106:20140819230843p:plain


簡単に埋め込むことができて便利なのですが、YouTubeのコントローラ部分も一緒に表示されてしまいます。このコントローラ部分を表示せずにYouTubeの動画を埋め込める「PrettyEmbed.js」というのがあると知ったのでVisualforceページで試してみました。


PrettyEmbed.jsはGitHubで公開されています。jquery.prettyembed.min.jsを読み込むだけで簡単に使用することができました。

f:id:tyoshikawa1106:20140819231646p:plain


GitHub上に公開されていたサンプルコードを参考に試してみたのがこちらです。コントローラ部分が非表示になってスッキリした見た目になりました。

f:id:tyoshikawa1106:20140819232022p:plain


動画再生中もコントローラが非表示の状態で見ることができます。

f:id:tyoshikawa1106:20140819232708p:plain


コントローラ部分は再生開始直後とマウスオーバー時に表示されました。これで一時停止や音量の調整なども行うことが可能です。

f:id:tyoshikawa1106:20140819232941p:plain

設定できるオプションについて

videoID

YouTubeの動画IDを指定します。動画IDはURLから確認できます。
(v=jv25DodsoFoの部分です)

f:id:tyoshikawa1106:20140819234918p:plain

previewSize

プレビュー画面の解像度と思われます。
次のサイズを指定できます。(※defaultはhdとなるみたいです。)

  • thumb-default
  • thumb-1
  • thumb-2
  • thumb-3
  • medium
  • high
  • hd
customPreviewImage

カスタムプレビューに表示される画像を任意の画像にしたい場合に指定するみたいです。

showInfo

上側に表示される動画情報の表示有無です。True/Falseで指定します。Trueにするとコントローラが表示されるタイミングで動画のタイトルなどが表示されます。Falseの場合は表示されません。

f:id:tyoshikawa1106:20140820000035p:plain

Display YouTube player controls.

下側に表示されるコントローラ部分の表示有無です。True/Falseで指定します。Falseの場合は表示されません。
(右下にYouTubeロゴのみ表示されました。)

f:id:tyoshikawa1106:20140820000335p:plain

loop

動画をループ再生するかのフラグみたいですが、うまく動作させることができませんでした。

closedCaptions

可能な場合にキャプションを閉じれるようにするためのものみたいですが、よくわかりませんでした。

localization

どの言語を使用するかを指定できるみたいです。

colorScheme

動画プレーヤのユーザーインターフェースを表示する。と翻訳されましたがちょっと良くわかりませんでした。

showRelated

関連動画の表示有無です。Trueにすると動作再生後に関連動画が表示されます。

f:id:tyoshikawa1106:20140820001825p:plain:w300

allowFullScreen

フルスクリーンモードの有効/無効を指定できます。Falseにするとフルスクリーンモードが選択できなくなりました。

useFitVids

訳したところ、"ロードされている/動画(s)を1回.pretty-埋め込むインスタンス上FitVids.jsを呼び出します。"とありました。


オプションについてはだいたいこんな感じだと思います。