動画マーケティングの最新情報|movieTIMES ムービータイムス

movieTIMES ムービータイムス 映像制作の株式会社LOCUS

ノウハウ 2013年11月08日

[前編]これでもう悩まない。YouTube動画の埋め込みに使える便利なパラメーター14選

キーワード: YouTube

YouTubeの動画をブログなどに埋め込む事が出来る様になってから、多くの人がこの埋込み機能を利用してきたと思います。

しかし既定の埋め込みコードに少し手を加えるだけで、便利で見た目にも素敵な埋め込み方ができるのはあまり知られていないかもしれません。

埋め込み動画の再生開始位置の設定からプレイヤーの色の変更方法まで、全部で14個の便利な埋め込み方法を前後編の2回に分けてご紹介いたします!

まずは基本の埋め込み方法からスタート!

まず、この動画を埋め込む場合の基本コードを確認してみましょう。

▼基本コード

<iframe src="//www.youtube.com/embed/7DGAoeMXBWM" width="560" height="315" frameborder="0" allowfullscreen></iframe>

このコードのそれぞれの意味を確認してみます。

【再生する動画のURL】

・src="//www.youtube.com/embed/7DGAoeMXBWM"

この値に「http:」と付け加えると、YouTubeの動画そのものが表示されます。
http://www.youtube.com/embed/7DGAoeMXBWM
この動画を表示しますよという意味ですね。

【大きさの設定】

・width="640"・・・横幅を設定できます
・height="360"・・・縦幅を設定できます

数値は自由に指定が可能ですが、縦横の比率を間違えると動画が歪んで表示されてしまいます。また、小さ過ぎると再生ができない場合もあるようです。

【埋め込み時のプレイヤーに枠線をつけるかどうか】

・frameborder="0"・・・(周囲に枠線をつけない)
・frameborder="1"・・・(周囲に枠線をつける)

「1」にするとプレイヤーの外周に1pxの枠線が表示されます。

【全画面表示について】

・allowfullscreen・・・無し(全画面表示ができないようにする)
・allowfullscreen・・・有り(全画面表示ができるようにする)

全画面表示の制御が可能になります。allowfullscreenをつけない場合、全画面表示ができなくなります。

ここまでが基本の埋め込みコードとなります。この基本のコード内の【再生する動画のURL】の後ろに、この後にご紹介するパラメーターを付加することによって、様々な再生方法を実現することができます。

パラメーターというのは設定値の事で、決められた値を指定する事で、埋め込んだ動画の再生方法を変更する事が出来るものです。

それでは、どのような再生方法があるのか見ていきましょう。

前編では動画再生に関する指定をご紹介!

動画をサイトに埋め込む時のちょっとした工夫がユーザーの利便性を高め、動画を見てもらう鍵となります。動画の自動再生、繰り返し再生など、そんな動画の再生に関するパラメーターを9個ご紹介いたします!

通常、動画の再生が終わると関連動画が表示される仕様になっていますが、関連動画を再生され、そのままサイトからYouTubeへユーザーが移動してしまったら嫌だという型も多いのではないでしょうか。

そんな方のために、YouTubeでは関連動画を表示しない為のオプションを用意しており、埋め込みコード生成の画面で「動画が終わったら関連動画を表示する」のチェックを外すと、再生完了後の関連動画が表示されなくなります。

youtube

これを手動で設定する場合は、基本コードのURLの後ろに「?」を付けた後、以下のコードを追加すると同じ様に関連動画が非表示になります。

【追加コード】

rel=0

【追加後の埋め込みコード】(「<」と「>」を半角にしてください)

<iframe src="//www.youtube.com/embed/7DGAoeMXBWM?rel=0" width="560" height="315" frameborder="0" allowfullscreen></iframe>

【表示サンプル】

繰り返し再生させたい

関連動画を非表示にしてそのままストップするのではなく、自動的にまた先頭から繰り返し再生させたい場合もあると思います。その場合には、以下のコードを追加してください。

【追加コード】

loop=1

【追加後の埋め込みコード】(「<」と「>」を半角にしてください)

<iframe src="//www.youtube.com/embed/7DGAoeMXBWM?loop=1"  width="560" height="315" frameborder="0" allowfullscreen></iframe>

自動的に動画を再生させたい

サイト訪問者に余計なクリックをさせたくない場合や、動画を必ずみて欲しいなど、自動的に動画を再生させたいというニーズもあるかと思います。そのような場合は、以下のコードを追加すると、動画が自動的に再生されます。

【追加コード】

autoplay=1

【追加後の埋め込みコード】(「<」と「>」を半角にしてください)

<iframe src="//www.youtube.com/embed/7DGAoeMXBWM?autoplay=1"  width="560" height="315" frameborder="0" allowfullscreen></iframe>

指定の位置から動画を再生させたい

長編の動画の中で、スポーツ動画の決定的シーンなど、ある決まった場面から再生させたい場合は、動画の開始時間を指定して再生する事ができます。

【追加コード】

start=再生開始位置(秒数)

【追加後の埋め込みコード】(「<」と「>」を半角にしてください)

<iframe src="//www.youtube.com/embed/7DGAoeMXBWM?start=40"  width="560" height="315" frameborder="0" allowfullscreen></iframe>

【表示サンプル】

指定の位置で動画を停止させたい

指定位置からの再生と同じ様に、指定位置で動画の再生を止める事ができます。よく、サイト誘導のために最後の決め場面を長く作っている動画を見かけますが、このパラメーターを使えば、その必要はありません。設定方法は「指定位置からの再生」と似ていて、「end=再生停止位置(秒数)」のパラメータを付加すれば良いだけです。

【追加コード】

end=再生停止位置(秒数)

【追加後の埋め込みコード】(「<」と「>」を半角にしてください)

<iframe src="//www.youtube.com/embed/7DGAoeMXBWM?end=50"  width="560" height="315" frameborder="0" allowfullscreen></iframe>

【表示サンプル】

指定の区間だけを再生させたい場合

動画の特定の区間を再生させたい場合、上記2つのコードを組み合わせる事で任意の箇所の再生が可能になります。

【動画の20秒~30秒の区間を再生をしたい場合の埋め込みコード】

<iframe src="//www.youtube.com/embed/7DGAoeMXBWM?start=20&end=30"  width="560" height="315" frameborder="0" allowfullscreen></iframe>

【表示サンプル】

Tips:複数のコードを同時に設定したい場合

上記の区間再生は指定の位置からの開始と指定の位置での停止のパラメーターを組み合わせただけのものとなります。この様に、二個以上のコードを同時に設定したい場合は「&」で繋ぐ様にしてください。順番は任意で構いません。例えば、動画を自動再生し、関連動画を非表示にしつつ繰り返し再生をしたい場合は以下の様になります。

<iframe src="//www.youtube.com/embed/7DGAoeMXBWM?rel=0&autoplay=1&loop=1"  width="560" height="315" frameborder="0" allowfullscreen></iframe>

動画の画質を指定して再生させたい

せっかくの高画質動画が、低画質で見られてしまう・・・。そんな場合は「vq」というパラメータを指定すると、任意の画質で再生する事が可能です。ただし、この指定は強制的にその画質で再生される為、回線が弱い環境での閲覧が想定される場合は、設定前に検討する必要があると思います。

【追加コード】

vq=値

【値】

・highres(その動画の一番高い品質)
・hd1080
・hd720
・large
・medium
・small

【追加後の埋め込みコード】(「<」と「>」を半角にしてください)

<iframe src="//www.youtube.com/embed/7DGAoeMXBWM?vq=highres"  width="560" height="315" frameborder="0" allowfullscreen></iframe>

【表示サンプル】

字幕を表示させたい

海外の動画を紹介する時など、字幕を表示させたい場合は、以下のパラメーターを追加すると、読者が字幕機能をオフにしていても、字幕が表示されるようになります。

【追加コード】

・cc_load_policy=0・・・字幕OFF
・cc_load_policy=1・・・字幕ON

【追加後の埋め込みコード】(「<」と「>」を半角にしてください)

<iframe src="//www.youtube.com/embed/7DGAoeMXBWM?cc_load_policy=1"  width="560" height="315" frameborder="0" allowfullscreen></iframe>

アノテーションを非表示にしたい

YouTubeには動画にインタラクティブなコメントを追加するアノテーション機能が存在します。しかし、YouTube上では見せたくとも、サイト内動画ではこの機能が邪魔になる事もあると思います。この機能を非表示にする為には以下の様なパラメータを追加します。

【追加コード】

・iv_load_policy=1・・・アノテーションOFF
・iv_load_policy=3・・・アノテーションON

【追加後の埋め込みコード】(「<」と「>」を半角にしてください)

<iframe src="//www.youtube.com/embed/7DGAoeMXBWM?iv_load_policy=3"  width="560" height="315" frameborder="0" allowfullscreen></iframe>

キーボードからの操作を無効にしたい

キーボード操作とはキーボードでYouTube動画の再生や早送りができる機能のことです。この操作を無効にする必要がある場合は少ないとは思いますが、以下のパラメーターでキーボードの操作を無効にする事ができます。

【追加コード】

・disablekb=0・・・キーボード操作有効
・disablekb=1・・・キーボード操作無効

【追加後の埋め込みコード】(「<」と「>」を半角にしてください)

<iframe src="//www.youtube.com/embed/7DGAoeMXBWM?disablekb=1"  width="560" height="315" frameborder="0" allowfullscreen></iframe>

【表示サンプル】

コンバージョン、動画を見てもらえるかの鍵となるカスタマイズ!

前編となる今回は、動画の再生に関するカスタマイズについてご紹介しました。関連動画を非表示にしたり、自動再生をさせるなど、見方によってはほんのちょっとしたことかもしれません。しかしながらその少しの気遣いの差が、動画を、ひいてはコンテンツを見て貰えるかどうかの差に繋がるのではないでしょうか。

ユーザーが訪問してくれたという折角の機会を無駄にしない為にも、こういった些細な箇所にも手間をかけていきたいものですね。

後編は、プレイヤーの見た目に関するカスタマイズ方法をご紹介したいと思います。

  • このエントリーをはてなブックマークに追加

動画制作×動画マーケティングにお困りならLOCUSへ

株式会社LOCUSでは大手企業から新進ベンチャー企業まで、800社以上の動画マーケティング支援を行っています。

幅広い用途や、多種多様な表現手法が揃う動画制作実績もご覧いただけます。

Page Top