YouTube動画の埋め込みコードをカスタマイズ

みなさん、こんにちは


「BloggerにYouTube動画を埋め込む」で紹介した動画の埋め込みですが、自分のイメージ通りに動画が表示されていない方もいらっしゃるのではないでしょうか。


俺の場合

1. サムネイル画像が大きい
2. 再生後に関連動画が表示される
3. タイトルを非表示にしたい

この3点が修正したい点です。

• サムネイル画像のサイズを調整する

この動画のサイズを下記のサイズに変更します。

要はサムネイル画像の大きさを通常の画像の表示サイズと同じ大きさにしたいのです。

サイズの変更はコピーした埋め込みコードを修正して調整します。

<iframe width="560" height="315" src="https://www.youtube.com/embed/gRt_U5LdzBQ" frameborder="0" allowfullscreen></iframe>

このコードの　width="560"　が幅、height="315"　高さになります。

この数値を　width="320"、height="266"に変更します。

• 再生後に関連動画を表示しない

関連動画はYoutube判断となってしまいますので、関連の薄い動画がリストアップされてしまう可能性もあります。

コンテンツ内容と関係のない動画が流れてしまうかもしれません。

そこで動画再生が終了したら最初の状態に戻るようにします。

src="https://www.youtube.com/embed/gRt_U5LdzBQ"　の動画URLの最後にパラメータを「?」を使って付加します。

パラメータは「rel=0」です。

src="https://www.youtube.com/embed/gRt_U5LdzBQ?rel=0"

となります。

• タイトルを非表示にする

タイトルは実はファイル名です。

このファイル名の表示を消します。

パラメータは「showinfo=0」です。

パラメータを複数追加するには「&」を使ってつなげていきます。

src="https://www.youtube.com/embed/gRt_U5LdzBQ?rel=0&showinfo=0"

となります。

最終的に埋め込みコードは以下のようになりました。

<iframe width="315" height="266" src="https://www.youtube.com/embed/gRt_U5LdzBQ?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>

表示は以下になります。

イメージ通りの表示となりました。

その他のパラメータは「YouTube 埋め込みプレーヤーとプレーヤーのパラメータ」を参照願います。

ではでは～☆ミ