• JavaScript/jQuery
  • コーディング

[jQuery]YouTube動画をサイトに埋め込む方法2(ブラウザの高さにfit)

Posted on 2017年7月28日

前回、YouTube Player APIを利用した動画の埋め込み方法をまとめました。だた、レスポンシブは可能なのですがブラウザ全面にフィットする動画の表示はできませんでした(方法が分からないだけかも…)。そんな時に便利なのが、jQueryのプラグイン「YTPlayer」です。

YouTube動画をサイトに埋め込む方法2(YTPlayer)

今回も、とりあえずDEMOを置いておきます。
iPhoneなどのスマホでは動画が表示されないので注意してください。スマホ用に代替え画像などを用意しましょう。
DEMO

1.YTPlayerを利用する準備

まず、プラグインを使う準備をします。
下記のサイトから「jquery.mb.YTPlayer.js」か「jquery.mb.YTPlayer.min.js」をDLして、HTMLで呼び出してください。
YTPlayer

2.基本的な使い方

使い方はとてもシンプルです。
まず、埋め込みたい要素に次のように記述します。

IDは任意のもので構いません。DIV要素以外でも大丈夫です。data-propertyの設定とJSのセレクタをIDに合わせてください。
data-propertyで細かい設定をしています。任意で書き換えてください。
各プロパティの説明はこちらです。

YouTubeのURLかID※必須
videoURL: ‘***’,
動画を埋め込む要素※必須(この要素の大きさにあわせて画像が埋め込まれる)
containment: ‘***’,
自動再生
autoPlay: true,
ループ
loop: false,
ミュート
mute: true,
音量(0~100)
vol: **,
コントローラーの表示
showControls: false,
ページを離れたら一時停止
stopMovieOnBlur: false,
動画の再生開始地点(秒)
startAt: 0,
動画の終了地点(秒)
stopAt: 30,
動画の透過
opacity: 1,
YouTubeロゴ表示
showYTLogo: true,

containmentで指定した要素の子要素として動画が埋め込まれます。動画のサイズはこの要素のサイズに自動で合わさるので、この要素の縦横をCSSで調整します。

最後にjsでYTPlayer関数を呼び出します。

基本的にはこれだけで動画が埋め込まれます。

3.イベントの利用

イベントを利用することで、動画の再生が終了した時の処理などを命令できます。
次の例では、再生が終了すると動画を埋め込んでいる要素が非表示になります。

イベントは他にも用意されていますので、詳しくは公式で確認してください。
home · pupunzi/jquery.mb.YTPlayer Wiki · GitHub

4.メソッドの利用

また、メソッドを利用することで、停止ボタンなどの制御ボタンをつけることができます。スキップボタンやミュートボタンも可能です。

メソッドは他にも用意されていますので、詳しくは公式で確認してください。
home · pupunzi/jquery.mb.YTPlayer Wiki · GitHub

この記事は、こちらのサイトを参考にしています。
YouTube動画を背景に使うなら「jquery.mb.YTPlayer」が良さげ – dev.kokushin