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

広告

動画毎に用意されている埋め込みコードを使って、動画をWebサイトやブログの記事の中に簡単に埋め込むことができます。ここでは動画をWebサイトやブログに埋め込む方法について解説します。

1.埋め込みコードの取得
2.動画プレイヤーのサイズ変更
3.動画が終わったら関連動画を表示する
4.埋め込み動画を自動的に再生する
5.開始位置と終了位置の指定
6.コントロールバーとプログレスバーの表示設定
7.プログレスバーの色とテーマの設定

動画をブログなどに埋め込むには埋め込みコードを取得する必要があります。埋め込みコードを取得するには動画の下の方に表示されている「共有」と書かれたリンクをクリックして下さい。

p17-1

「埋め込みコード」と書かれたリンクをクリックして下さい。

p17-2

埋め込みコードが表示されます。

p17-3

ここに表示されたコードをブログの記事などに挿入することでブログに動画を埋め込むことができます。

----

では実際に試してみます。Bloggerで新しい記事を作成し、先ほどのコードを挿入しました。(HTMLモードで作成しています)。

p17-4

記事を公開すると、コードを埋め込んだ位置に動画プレイヤーが表示されており動画を再生することができます。

p17-5

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

埋め込みコードをブログに挿入することで動画プレイヤーがその位置に表示されますが、動画プレイヤーのサイズを指定することができます。埋め込みコードが表示された下に「動画のサイズ」と書かれたドロップダウンメニューがありますのでクリックして下さい。

p17-6

デフォルトでは「560x315」となっており、他に「640x360」「853x480」「1280x720」「カスタムサイズ」からサイズを選択できます。単位はピクセルです。いずれも縦と横の比率は16対9になっておいます。

「カスタムサイズ」を選択すると任意のサイズを指定することができます。ただこの場合でも縦と横の比率は16対9となるため、縦または横のサイズを入力すると比率に従ってもう片方の値が自動的に決まります。(下記では横のサイズを300pxと入力したので、縦のサイズが自動的に169pxになっています)。

p17-7

サイズを変更した場合、埋め込みコードが変更されます。その為、サイズを変更した場合は新しい埋め込みコードをブログなどに挿入しなおす必要があります。では先ほどカスタムサイズで指定した「300x169」のサイズで改めてブログに埋め込んでみました。

p17-8

動画プレイヤーのサイズが指定した大きさで表示されました。

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

p17-9

関連する動画を表示しないように設定するには埋め込みコードを取得する画面で「動画が終わったら関連動画を表示する」のチェックを外して下さい。

p17-10

変更後、新しい埋め込みコードをブログに挿入し動画を再生してみると、再生が終わった後に関連する動画は表示されず最後の部分がそのまま表示されています。

p17-11

動画が埋め込まれたブログ記事を表示した場合、通常は次のように再生開始のボタンをクリックしない限り動画は再生されません。

p17-12

記事が表示された時に動画を自動的に再生するには埋め込みコードに「autoplay=1」を手動で追加します。

埋め込みコードが変更前が次のようだった場合で考えてみます。

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

動画IDの後に「?autoplay=1」を追加して下さい。

<iframe width="560" height="315" 
src="//www.youtube.com/embed/khFjQDiCKE4?autoplay=1" 
frameborder="0" allowfullscreen></iframe>

動画IDの後に他のパラメータが既に付いていた場合は「?autoplay=1」ではなく「&autoplay=1」を既に付いているパラメータの後ろに追加して下さい。

<iframe width="560" height="315" 
src="//www.youtube.com/embed/khFjQDiCKE4?rel=0&autoplay=1" 
frameborder="0" allowfullscreen></iframe>

埋め込みコードを修正しブログに挿入した後で動画が埋め込まれた記事を表示してみると、再生開始のボタンをクリックしなくても自動的に動画の再生が開始されます。

p17-13

ただし動画は音が出るものがほとんどですし、記事の表示と同時に動画を自動的に再生させるのは記事を閲覧する方にあまり喜ばれないかもしれません。

動画の開始位置と終了位置を指定することができます。開始位置を指定する場合は動画IDの後に「?start=num」を追加して下さい。「num」には秒数を指定します。例えば90秒後から開始したい場合は「?start=90」となります。

<iframe width="560" height="315" 
src="//www.youtube.com/embed/khFjQDiCKE4?start=90" 
frameborder="0" allowfullscreen></iframe>

終了位置を指定する場合は動画IDの後に「?end=num」を追加して下さい。「num」には秒数を指定します。例えば120秒後までの部分だけを再生させたい場合は「?end=120」となります。

<iframe width="560" height="315" 
src="//www.youtube.com/embed/khFjQDiCKE4?end=120" 
frameborder="0" allowfullscreen></iframe>

開始位置と終了位置を同時に指定することもできます。この場合、2つ目のパラメータは「?」ではなく「&」を使用して下さい。

<iframe width="560" height="315" 
src="//www.youtube.com/embed/khFjQDiCKE4?start=90&end=120" 
frameborder="0" allowfullscreen></iframe>

埋め込みコードを修正しブログに挿入した後で動画が埋め込まれた記事を表示してみると、埋め込まれた動画に開始位置と終了位置が表示されており、再生を行うと開始位置から再生が始まり終了位置まで達すると再生が終了します。

p17-14

動画は再生を開始した直後は画面上部と画面下部にコントロールバーとプログレスバーが表示されています。

p17-15

デフォルトの設定の場合、数秒経過すると画面上部と画面下部のコントロールバーがフェードアウトし、プログレスバーだけが幅が狭くなって画面下部に表示されます。

p17-16

このコントロールバーとプログレスバーの表示方法を変更するには「?autohide=no」を追加します。「no」には0から2の値が入ります。

<iframe width="560" height="315" 
src="//www.youtube.com/embed/khFjQDiCKE4?autohide=1" 
frameborder="0" allowfullscreen></iframe>

パラメータとして「?autohide=2」を追加すると画面下部のコントロールバーはそのまま表示されプログレスバーの幅が狭くなって表示されます。

p17-17

パラメータとして「?autohide=1」を追加するとコントロールバーもプログレスバーも表示されなくなります。

p17-18

パラメータとして「?autohide=0」を追加するとコントロールバーもプログレスバーもそのまま表示されます。

p17-19

いずれの場合も動画が表示されているところにマウスを合わせるとコントロールバーもプログレスバーも表示されます。

動画の再生位置を表すプログレスバーの色は通常赤色ですが白色に変更することができます。

p17-20

プログレスバーの色を変更するには「?color=white」を追加します。デフォルトは「color=red」です。

<iframe width="560" height="315" 
src="//www.youtube.com/embed/khFjQDiCKE4?color=white" 
frameborder="0" allowfullscreen></iframe>

実際に埋め込みコードを変更した後でブログ記事を表示し動画を再生してみるとプログレスバーの色が白に変わっています。

p17-21

また表示される動画プレイヤーのテーマを変更することもできます。変更するには「?theme=light」を追加します。デフォルトの値は「theme=dark」です。

<iframe width="560" height="315" 
src="//www.youtube.com/embed/khFjQDiCKE4?theme=light" 
frameborder="0" allowfullscreen></iframe>

実際に埋め込みコードを変更した後でブログ記事を表示し動画を再生してみるとコントロールバーの色が黒から灰色に変わっています。

p17-22

プログレスバーの色とテーマを同時に指定することもできます。この場合、どちらも白系の色になります。

p17-23

----

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

( Written by Tatsuo Ikura+ )