ランディングページや教材動画で気をつけたいyou tubeの設定(パラメータ)

ランディングページや教材動画で気をつけたいyou tubeの設定(パラメータ)

こんにちは!

ブリスデザイン・コンサルティングの青木慶子です:D

100×100

ランディングページや教材ページに、

you tubeの動画を埋め込む際に気をつけたい設定(パラメータ)について、

まとめました♪

spacer600-30

HDのキレイな画質で表示したい

動画がぼやけてるなぁと思ったら、HD設定にするといいかも。

※動画作成時にHDで作った場合のみ高画質で再生されるのでご注意!

hd設定

HDで再生したい場合は、パラメータ同士をつなげる「&」と、「vq=hd720」を動画URLのお尻に設定する

例:埋め込みコード
<iframe src=”//www.youtube.com/embed/DxDXYaUM2qs?rel=0&vq=hd720” height=”315″ width=”560″ allowfullscreen=”” frameborder=”0″></iframe>

 特に600px以上ある大きなサイズで再生したい場合は、HDがおすすめ!

spacer600-30

再生後に表示される関連動画を非表示にしたい

通常、埋め込み用のスクリプトは関連動画が非表示になっていますので、特に設定する必要はありませんが、
念のため説明しますね。

もし、再生後に、まったく関係ない動画のサムネイルが表示されてしまったら…。
特にセールス用の動画に関係ない動画が表示されて、その動画に読者さんが流れてしまったら悲しいですね。
その場合は、「rel=1」を「rel=0」にするといいですよ。

例:埋め込みコード
<iframe src=”//www.youtube.com/embed/DxDXYaUM2qs?rel=0” height=”315″ width=”560″ allowfullscreen=”” frameborder=”0″></iframe>

spacer600-30

You tubeのロゴを目立たなくしたい

modestbranding=1というパラメータを使えば、

再生画面の右下にあるyou tubeのロゴを非表示にできます。

youtubeロゴ非表示

私はあまりロゴ表示は気にならないのですが、どーーーーしても気になる方は設定してみてね。

例:埋め込みコード
<iframe src=”//www.youtube.com/embed/DxDXYaUM2qs?rel=0&modestbranding=1” height=”315″ width=”560″ allowfullscreen=”” frameborder=”0″></iframe>

spacer600-30

左上のタイトル&リンクを非表示にしたい

再生中に左上に動画のタイトルが表示されます。

情報バー表示

それをクリックするとYou tubeにジャンプしてしまいます。

セールス用の動画などでは他ページに流れてしまうと困りますよね。

なのでshowinfo=0を設定してね。

例:埋め込みコード
<iframe src=”//www.youtube.com/embed/DxDXYaUM2qs?rel=0&showinfo=0” height=”315″ width=”560″ allowfullscreen=”” frameborder=”0″></iframe>

spacer600-30

パラメータ設定の最初は「?」で。各設定をつなぐのは「&」

パラメーターの設定をしたい場合は、最初に「?」を追加して、パラーメータをつなぐことを準備。上記で説明した設定をぜんぶ盛り込みたいときは、各設定を「&」でつなぐとOKですよ!

例:埋め込みコード
<iframe src=”//www.youtube.com/embed/DxDXYaUM2qs?rel=0&vq=hd720&modestbranding=1&showinfo=0” height=”315″ width=”560″ allowfullscreen=”” frameborder=”0″></iframe>

設定を全部盛り込んだ動画はこちら

いかがですか? すっきりシンプルになりました。

spacer600-30

ブラウザの横幅にあわせて自動的に動画のサイズが縮小されるようにしたい

CSSの設定が必要!

一から書くと大変なので、コピペして使えるサイトを探しました~♪

森薫の日記」さんのサイトが分かりやすかったので使用させていただきました!

spacer600-30

パラメータ設定で参考になるサイト

php&java scriptさんのサイトを参考にさせていただきました。

  • YouTube動画埋め込みプレーヤーのパラメータ

  • ↑ 他のパラメータも紹介されてます♪