投稿したyoutube動画をサイト内へ埋め込みたい時ってありますよね。
今回はyoutube動画の埋め込みについて書いていきたいと思います。
Youtubeで埋め込みコードを取得
まず始めに、youtubeページへいき、埋め込みたい動画の再生画面を表示します。
動画の右下の[共有]をクリックしてください。
次に埋め込むをクリックします。
ポップアップで動画を埋め込むためのコードが表示されます。
このコードをサイトの埋め込みたい箇所へペーストするだけで動画が表示されます。
このように動画の埋め込みはコードを取得することで簡単にできます。
動画プレイヤーのサイズ
埋め込んだ動画サイズの指定方法について
下記埋め込みコードの「width="560" height="315"」の部分を直接書き換えて下さい。
<iframe width="560" height="315" src="https://www.youtube.com/embed/〇〇〇〇" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
サイズ560×315
例：サイズ500×200の場合は埋め込みコードは下記のようになります。
<iframe width="500" height="200" src="https://www.youtube.com/embed/〇〇〇〇" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
サイズ500×200
パラメータ
自動再生
こちらは動画が読み込まれた時に再生ボタンを押さなくても再生されるパラメータです。
[autoplay]を追加します。
autoplay=0 自動再生しない(デフォルト)
autoplay=1 自動再生する
<iframe src="https://www.youtube.com/embed/ID?autoplay=1" ></iframe>
ループ再生
[roop=0&playlist=ID]を追加
1を設定すると、最初の動画が繰り返し再生されます。
roop=0 繰り返し再生しない(デフォルト)
roop=1 繰り返し再生する
<iframe src="https://www.youtube.com/embed/ID?loop=1&playlist=ID" ></iframe>
再生開始位置と再生終了位置を指定
埋め込んだ動画を再生した時の再生開始位置と再生終了位置をそれぞれ指定することができます。
start=秒数 動画の先頭から指定した秒数分進めた位置から再生
end=秒数 指定した秒数になったら再生を停止。動画の先頭からの秒数で指定
下記は5秒後から再生開始し、25秒後で再生を停止するように設定したコードです。
「start=5&end=25」
<iframe src="https://www.youtube.com/embed/ID?start=5&end=25" ></iframe>
関連動画を表示・非表示
デフォルトでは埋め込まれた動画の再生が終わったら、関連する動画が表示されるように設定されています。
[rel=0]を追加。
1を設定すると、関連する動画が表示されます。
rel=0 動画の再生後に関連動画を表示しない
rel=1 動画の再生後に関連動画を表示する(デフォルト)
<iframe src="https://www.youtube.com/embed/ID?rel=1" ></iframe>
パラメータを複数設定する
設定方法は下記となります。
最初に設定するパラメータの前に[?]を置いて、以降のパラメータ同士の間に[&]を入れるだけです。
<iframe src="https://www.youtube.com/embed/ID?パラメータ&パラメータ&パラメータ" ></iframe>
細かい設定方法や、他の利用可能パラメータにつきましては下記よりご確認ください。
