Youtube埋め込みを自由自在にカスタマイズする！

ブログやサイトに動画を埋め込む際にYoutubeを使っている人は多いと思います。今回はその埋め込みを自由自在にカスタマイズする方法を紹介したいと思います。

基本的なYoutubeの埋め込み方法

まずは基本的なYoutubeの埋め込み方法です。埋め込みたいYoutube動画のページへ行きます。せっかくなので今回は可愛い猫の動画を例に紹介したいと思います。

▼動画下にある「共有」ボタンをクリック


▼「埋め込みコード」をクリック

カスタマイズしない場合はこのコードをブログやサイトへコピー＆ペーストするだけで埋め込み完了です。

▼「もっと見る」で基本カスタマイズを表示


▼ここでも簡易的なカスタマイズを行うことができます。

・「動画のサイズ」で縦横比を維持したままいくつかのサイズ変更を行うことができます。
・次に関連動画は終了時に関連動画を表示するか変更できます。
・プレーヤーのコントロールは再生ボタンなどを表示するかどうか
・動画のタイトルは動画の上部に出てるタイトルと共有ボタンを表示するかどうか
・プライバシーは再生するまでユーザー情報をYoutubeに渡さないようにする設定
・以前の埋め込みコードはそのままです。
もしかしたらこのカスタマイズオプションで使う可能性が高いのは動画のサイズ変更と終了時の関連動画を非表示に設定するくらいではないでしょうか。プレビューも表示されるのでそれぞれチェックをはずしたりつけたりいろいろと試してみてください。

Youtube埋め込みカスタマイズオプション

上記の埋め込みを行なった動画のコードは以下のようになっています。
＜iframe width=”560″ height=”315″ src=”//www.youtube.com/embed/c4U_z7v0Vl4″ frameborder=”0″ allowfullscreen＞＜/iframe＞
ここからさらに様々なカスタマイズを行うことができます。
＜iframe
width=”560″　動画の横幅　数値を変更すれば横幅が変わります。
height=”315″ 動画の縦幅　数値を変更すれば縦幅が変わります。
src=”//www.youtube.com/embed/c4U_z7v0Vl4″　動画のURLです。
frameborder=”0″ 動画の枠0＝枠無し、1にすると有り。
allowfullscreen＞　全画面表示有り、無しの場合は削除してください。
＜/iframe＞
上記しただけでもかなりカスタマイズを行うことができますが、動画のURLに様々な引数を設定する事で他にも色々とカスタマイズする事ができます。それぞれ埋め込み動画のURLに？○○＝○というような形で追加することで設定完了です。2個以上続けたい場合は？○○＝○＆○○＝○のように最初だけ？で次からは＆で繋げて設定しましょう。下に記述しますが時間指定のカスタマイズを見てもらうとわかりやすいかもしれません。
・動画の連続再生　?loop=1
src=”//www.youtube.com/embed/c4U_z7v0Vl4?loop=1″

・動画の自動再生　?autoplay=1
src=”//www.youtube.com/embed/c4U_z7v0Vl4?autoplay=1″

・アノテーションの表示設定　?iv_load_policy=1
src=”//www.youtube.com/embed/c4U_z7v0Vl4?iv_load_policy=1″
※アノテーションとは動画内の任意にはれるコメントなど。時として邪魔な場合があるので設定する事で動画が見やすくなる場合があります。ちなみに絶対表示させたい場合は数値を3に設定しましょう。

・再生開始時間の設定　?start=○　○は秒数　1分なら60など
src=”//www.youtube.com/embed/c4U_z7v0Vl4?start=60″

・再生終了時間の設定 ?end=○　2分なら120
src=”//www.youtube.com/embed/c4U_z7v0Vl4?end=120″

・再生開始と終了を指定　?start○=&end=○
src=”//www.youtube.com/embed/c4U_z7v0Vl4??start60=&end=120″

・動画の品質を設定　?vq=○
○の中に当てはめる値は以下のものがあります。一番上が一番高品質で下になれば品質が悪くなります。
highres
hd1080
hd720
large
medium
small

・字幕の設定　?cc_load_policy=0 0=無し　1は有り

・キーボード操作無効設定　?disablekb=0 0=有効　1は無効
いかがでしたでしょうか。youtubeを埋め込むだけでもこれだけ多くのカスタマイズオプションが存在します。埋め込み人それぞれで使うシチュエーションが違うと思います。良く使いそうな設定があったら覚えておくと便利かもしれませんよ！