ホームページの制作や運営サポートのご相談はデジフィーへ

YouTubeをサイトに貼るときのカスタマイズ（音量ミュートなど）1/2

YouTubeをサイトに貼るときのカスタマイズ方法についていくつか書いてみました。

今、GoogleがテレビCMを打つくらい、YouTubeに力を入れています。
そして、検索結果にかなり反映させていくということを言っています。

今後、動画を使ってマーケティングをしようという、流れに拍車がかかるのは、間違いなさそうです。

先日、YouTubeをサイトに貼るときいろいろとカスタマイズできることがわかったので、YouTube動画を貼るときの参考にしてもらえればと思います。

大きく2つの方法をやってみました。

1. YouTubeがもともと用意しているカスタマイズ方法。
2. Javascriptを使ったAPIを使用する方法です。

カスタマイズでやってみたのは、

• 動画の自動再生。
• 動画上部のタイトルを消したい。
• 関連動画を表示しない。
• ループ（繰り返し）再生。
• 音量のミュート。

です。実際にカスタマイズしたサイトがこちらです。

11台ドラムバンド『DQS』オフィシャルサイト

こちらのサイトでは、YouTube動画をトップページに貼ってとにかくライブの迫力を感じてもらおうということなのですが、そのままでは

• 静止時のサムネイルが地味に見える。（通常プログラムではサムネイルを自動で作られたものからしか選べない）
• 動画をしっかり見せたいので、上部のタイトルを非表示にしたい。
• そこで、自動再生にしたいが、サイトが開いていきなり音が鳴るのはあまり良くないので、ミュートしたい。
• 最後に関連動画がでてくるのが、かっこ悪いのでやめたい。
• どうせなら、繰り返しみせたい。

というところで、カスタマイズを行いました。

まずは1つ目の方法、いくつかはとくに難しいこともなく実装できます。

共有→埋め込みコード　このコードをサイトにペタッとすれば良いのですが、下記の項目のチェックを外すと

• 動画が終わったら関連動画を表示する→関連動画表示されない。
• 動画のタイトルとプレーヤーの操作を表示する。→動画上部のタイトルが消えます。

ちなみに、

• プレーヤーのコントールを表示する→画面下部の再生ボタンとかが非表示になります。

あとは、自動再生とループとミュートをどうしたら良いか。
どうやら、他は直接コードに追記しないといけないようです。

できあがったソースコードの
「src=”//www.youtube.com/embed/iCD-7zn2-gs?rel=0&controls=0&showinfo=0″」
の後に&でつなげて下記のパラメータを追記していきます。

「src=”//www.youtube.com/embed/iCD-7zn2-gs?rel=0&controls=0&showinfo=0&autoplay=1&loop=1“」

ちなみにすでについているパラメータは

となります。

「あれ？ミュートはどうなった？？」

実は、この方法では、ミュートができないのです。。。実は冒頭で書いた2の方法を行う必要があります。
それについては、次回書いていこうと思います。

YouTubeをサイトに貼るときのカスタマイズ（音量ミュートなど）2/2