動画をWebサイトやブログに埋め込む

広告

YouTubeの動画は埋め込みようのコードを取得することで、自分が運営しているWebサイトやブログに埋め込むことができます。ここでは動画をWebサイトやブログに埋め込む方法について解説します。

動画の埋め込みコードを取得するには、取得したい動画の再生画面を表示して下さい。

p5-1

動画の右下に表示されている「共有」をクリックして下さい。

p5-2

「共有」画面が表示されます。「埋め込む」をクリックして下さい。

p5-3

※ 「埋め込む」がクリックできない場合、動画の外部サイトへの埋め込みが許可されていません。その場合は埋め込みすることはできません。

動画をブログなどに埋め込むためのコードが表示されます。下記赤い四角で囲まれた「<」から「>」までをコピーして下さい。

p5-4

今回の動画を埋め込むためのコードは次のようになっていました。

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/OWoKzNxZWw8" 
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>

-- --

それでは実際にブログの記事に埋め込んでみます。今回ははてなブログを使用しました。新しい記事を作成し、「HTML編集」にした後で先ほど取得したコードを入力しました。(コードは実際には1行です。見やすいように改行を追加しています)。

p5-5

記事を公開すると、コードを埋め込んだ位置に動画プレイヤーが表示され、YouTubeの再生画面と同じように動画をブログ記事上で再生することができます。

p5-6

p5-7

このように動画の埋め込みコードを取得することで、簡単にWebサイトやブログに動画を埋め込むことができます。

動画を埋め込んだ時の動画プレイヤーのサイズを指定する方法です。推奨サイズは480px × 270px以上のサイズでアスペクト比16:9(つまり縦横の比率が16:9)になるようにして下さい。サイズを指定する場合は埋め込みコードの「width="560" height="315"」の部分を直接書き換えて下さい。

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/OWoKzNxZWw8" 
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>

例えば動画プレイヤーのサイズを 480px × 270px にする場合は次のようになります。

<iframe width="480" height="270" 
src="https://www.youtube.com/embed/OWoKzNxZWw8" 
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>

それでは実際に試してみます。ブログ記事の編集画面で次のように2つの埋め込みコードを入力しました。それぞれ動画プレイヤーのサイズが異なります。

p5-8

記事を公開すると、2つの動画プレイヤーが指定したサイズで表示されました。

p5-9

デフォルトの設定では埋め込まれた動画の再生が終わったら、関連する動画が動画プレイヤー上に表示されます。

p5-10

関連する動画を表示しないように設定するには、「rel」パラメーターを使用します。

rel=0 動画の再生後に関連動画を表示しない
    1 動画の再生後に関連動画を表示する(デフォルト)

デフォルトの値は1で関連動画表示されます。再生が終わった後に関連動画を表示しないようにするには、「src」のURLにパラメータとして「rel=0」を設定して下さい。

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/OWoKzNxZWw8?rel=0" 
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>

それでは実際に試してみます。ブログ記事の編集画面で次のように2つの埋め込みコードを入力しました。1つ目はデフォルトのまま、2つ目は動画の再生が終わっても関連動画を表示しないように設定してあります。

p5-11

記事を公開し、それぞれの動画を再生すると、2つ目の動画プレイヤーは再生が終わっても関連動画が表示されません。

p5-12

動画をブログなどに埋め込んだ場合、記事が表示されても動画はユーザーが再生ボタンをクリックしない限り再生されません。

p5-13

記事が表示された時に動画が自動的に再生するように設定するには、「autoplay」パラメーターを使用します。

autoplay=0 自動再生しない(デフォルト)
         1 自動再生するする

デフォルトの値は0で自動再生されません。自動再生するには、「src」のURLにパラメータとして「autoplay=1」を設定して下さい。

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/OWoKzNxZWw8?autoplay=1" 
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>

それでは実際に試してみます。ブログ記事の編集画面で次のように2つの埋め込みコードを入力しました。1つ目はデフォルトのまま、2つ目は記事が表示されると動画が自動的に再生するように設定してあります。

p5-14

記事を公開した後で記事を表示すると、2つ目の動画プレイヤーは自動的に再生が開始されます。

p5-15

ブログに埋め込んだ動画を再生した時に、再生開始位置と再生終了位置をそれぞれ指定することができます。「start」パラメータと「end」パラメータを使います。

start=秒数 動画の先頭から指定した秒数分進めた位置から再生
end=秒数 指定した秒数になったら再生を停止。動画の先頭からの秒数で指定

どちらか一つでも両方でも指定できます。例えば10秒後から再生開始し、25秒後(再生開始から15秒後)で再生を停止する場合は「start=10&end=25」を設定して下さい。

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/OWoKzNxZWw8?start=10&end=25" 
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>

それでは実際に試してみます。ブログ記事の編集画面で埋め込みコードを修正し再生開始位置と再生終了位置が設定してあります。

p5-16

記事を公開し、動画の再生を開始するとパラメータで指定した10秒の位置から再生が開始されます。

p5-17

動画の再生は、パラメータで指定した25秒の位置まで行って再生が終了します。

p5-18

動画を再生中に動画にマウスを合わせるとコントロールが表示されます。

p5-19

動画にマウスを合わせてもコントロールが表示されないように設定するには、「controls」パラメーターを使用します。

controls=0 コントロールが表示されません
         1 コントロールが表示されます(デフォルト)
         2 コントロールが表示されます(現在は1とほぼ同じです)

デフォルトの値は1でコントロールが表示されます。コントロールを非表示にするには、「src」のURLにパラメータとして「controls=0」を設定して下さい。

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/OWoKzNxZWw8?controls=0" 
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>

それでは実際に試してみます。ブログ記事の編集画面で埋め込みコードを修正しコントロールが表示されないように設定してあります。

p5-20

記事を公開し、動画を再生した後で動画にマウスを合わせてみてもコントロールが表示されてないことが確認できます。

p5-21

動画を再生した時に字幕をデフォルトで表示させるようにすることができます。字幕を表示にするには、「cc_load_policy」パラメーターを使用します。

cc_load_policy=1 ユーザー設定に関わらず字幕を表示します

デフォルトの値はユーザー設定基づきます。字幕を表示するには、「src」のURLにパラメータとして「cc_load_policy=1」を設定して下さい。

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/OWoKzNxZWw8?cc_load_policy=1" 
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>

また字幕を表示する時に字幕の言語を指定することができます。字幕の言語を指定するには、「cc_lang_pref」パラメーターを使用します。

cc_lang_pref=2文字の言語名コード 日本語ならja、英語ならen など

字幕の言語に英語を設定するには、「src」のURLにパラメータとして「cc_load_policy=1」に加えて「cc_lang_pref=en」を設定して下さい。

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/OWoKzNxZWw8?cc_load_policy=1&cc_lang_pref=en" 
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>

それでは実際に試してみます。ブログ記事の編集画面で次のように2つの埋め込みコードを入力しました。1つ目は字幕表示の設定をしたもので、2つ目は字幕表示に加えて字幕の言語を英語に設定してあります。

p5-22

記事を公開し動画の再生をそれぞれ行うと、1つ目の動画プレイヤーには日本語の字幕、2つ目の動画プレイヤーには英語の字幕が表示されます。

p5-23

----

動画の埋め込みコードを取得し、Webサイトやブログに埋め込む方法について解説しました。

YouTubeの使い方の他の記事を見てみる

( Written by Tatsuo Ikura+ )

関連記事 (一部広告含む)