簡単!YouTube動画を
ページに埋め込む方法

2018/11/25

YouTube動画は、ページ内に埋め込んで表示することも出来ます。

You Tubeでは、埋め込み用の動画リンクコードを生成する機能が完備されています。

今回は、基本的なYouTube動画の埋め込み方と、よく使う設定をざっくりとまとめてみました。

ATTENTION!! アドセンスで収益化しているサイトの場合は、埋め込む動画には細心の注意を払いましょう。

著作権を侵害している動画の埋め込みやリンクは、アドセンスポリシー違反となりアカウント凍結や広告停止の要因になります。

\項目をタップするとジャンプできます/

YouTubeで動画コードを取得する

まずは、パソコンでYou Tubeを開き、埋め込みたい動画を見ます。スマホからは取得できないので、必ずパソコンでチェックしましょう。

・動画を再生したら、動画下メニューから「共有」をクリック。

・「埋め込む<>」をクリック。

・コードが出るので、コピー。

あとはファイルにペーストでOK。

カンタンですね。

You Tube公式サポート

埋め込みコードのカスタマイズ

You Tubeの埋め込みコードには、動画の画面サイズや字幕指定など、自分でカスタマイズできる項目もあります。

ここでは使用頻度が高そうなものを4つほどご紹介します。

自分のサイトに合わせて動画を微調整してみましょう。

動画の画面サイズ

You Tubeの埋め込み動画はデフォルトでは大きすぎるので、適当なサイズを指定しましょう。

コード上の「width="" height=""」の数字を書き換えます。

アスペクト比は「16:9」推奨となっています。

スマートフォンの最小画面にも収まるサイズを考慮すると、width="320" height="180"あたりが無難です。

HTML

<iframe width="320" height="180" src="https://aaa/bbb/ccc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

関連動画の指定

You Tubeの埋め込み動画は、デフォルトでは動画終了時に関連動画が表示されます。

関連動画を表示させない場合は「src=""」内の末尾に「?rel=0」を書き加えます。

関連動画が表示されなくなります。

HTML

src="https://aaa/bbb/ccc?rel=0"

数字の示すパラメータは
0 関連動画を表示しない
1 関連動画を表示する
となります。

動画の自動再生の指定

You Tubeの埋め込み動画は、デフォルトではユーザーが再生ボタンを押さない限り再生されません。

指定を変えて、記事が表示されたと同時に動画を再生させることも出来ます。

ただし、迷惑に感じるユーザーもいると思うので(私は初見でなんて迷惑なんだと思いました)使う場合は本当に必要なのか熟慮しましょう。

指定方法は「src=""」内末尾に「?autoplay=1」を書き加えます。

先に「?rel=0」などを追加している場合は、「&autoplay=1」というふうに、先頭の文字を「&」にします。

HTML

src="aaa/bbb/ccc?autoplay=1"

数字のパラメータは
0 自動再生しない(デフォルト)
1 自動再生する
となります。

動画に字幕をつける

動画に字幕を表示することも出来ます。

ただし、動画側に字幕の用意がある場合に限ります。

字幕の用意がない動画に設定しても何も表示されません。

自分で動画を作っている場合は、字幕を用意して表示してみるのも楽しいかも知れません。

動画に字幕を表示する

動画の字幕はデフォルトでオフになっているので、オンに設定します。

指定方法は「src=""」内末尾に「?cc_load_policy=1」を追加します。

これで、字幕表示がオンになります。

HTML

src="aaa/bbb/ccc?cc_load_policy=1"

先に「?rel=0」などを追加している場合は、先頭の文字は「&」にします。

何も追加していない場合には「?」を使います。

字幕の言語を指定する

字幕の言語を指定することも出来ます。

とはいえ、動画側で用意のある言語の字幕しか表示されません。

字幕の言語を指定する場合は「&cc_lang_pref=ja」と追加します。

「ja」部分は、どの言語かの指定です。

この場合は日本語を指定しています。

英語の場合は「en」、フランス語なら「fr」とします。
気になる方は「2文字の言語コード」と検索してみましょう。

HTML

src="aaa/bbb/ccc?cc_load_policy=1&cc_lang_pref=ja"

「字幕設定」と「言語指定」はどちらを先に書いても動きますが、あとにくっつける方は必ず、先頭の文字を「?」ではなく「&」とするのがポイントです。

SHARE

このサイトについて

「Web Work Plus」はWEB制作・ビジネスのちょい足し情報メデイアです。ちょっとしたハテナをプラスに変える役立つ備忘録を発信中!