簡単！YouTube動画を
ページに埋め込む方法
YouTube動画は、ページ内に埋め込んで表示することも出来ます。
You Tubeでは、埋め込み用の動画リンクコードを生成する機能が完備されています。
今回は、基本的なYouTube動画の埋め込み方と、よく使う設定をざっくりとまとめてみました。
ATTENTION!!
アドセンスで収益化しているサイトの場合は、埋め込む動画には細心の注意を払いましょう。
著作権を侵害している動画の埋め込みやリンクは、アドセンスポリシー違反となりアカウント凍結や広告停止の要因になります。
YouTubeで動画コードを取得する
まずは、パソコンでYou Tubeを開き、埋め込みたい動画を見ます。スマホからは取得できないので、必ずパソコンでチェックしましょう。
・動画を再生したら、動画下メニューから「共有」をクリック。
・「埋め込む＜＞」をクリック。
・コードが出るので、コピー。
あとはファイルにペーストでOK。
カンタンですね。
埋め込みコードのカスタマイズ
You Tubeの埋め込みコードには、動画の画面サイズや字幕指定など、自分でカスタマイズできる項目もあります。
ここでは使用頻度が高そうなものを4つほどご紹介します。
自分のサイトに合わせて動画を微調整してみましょう。
動画の画面サイズ
You Tubeの埋め込み動画はデフォルトでは大きすぎるので、適当なサイズを指定しましょう。
コード上の「width="" height=""」の数字を書き換えます。
アスペクト比は「16:9」推奨となっています。
スマートフォンの最小画面にも収まるサイズを考慮すると、width="320" height="180"あたりが無難です。
<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」を書き加えます。
関連動画が表示されなくなります。
src="https://aaa/bbb/ccc?rel=0"
数字の示すパラメータは
0 関連動画を表示しない
1 関連動画を表示する
となります。
動画の自動再生の指定
You Tubeの埋め込み動画は、デフォルトではユーザーが再生ボタンを押さない限り再生されません。
指定を変えて、記事が表示されたと同時に動画を再生させることも出来ます。
ただし、迷惑に感じるユーザーもいると思うので（私は初見でなんて迷惑なんだと思いました）使う場合は本当に必要なのか熟慮しましょう。
指定方法は「src=""」内末尾に「?autoplay=1」を書き加えます。
先に「?rel=0」などを追加している場合は、「&autoplay=1」というふうに、先頭の文字を「&」にします。
src="aaa/bbb/ccc?autoplay=1"
数字のパラメータは
0 自動再生しない（デフォルト）
1 自動再生する
となります。
動画に字幕をつける
動画に字幕を表示することも出来ます。
ただし、動画側に字幕の用意がある場合に限ります。
字幕の用意がない動画に設定しても何も表示されません。
自分で動画を作っている場合は、字幕を用意して表示してみるのも楽しいかも知れません。
動画に字幕を表示する
動画の字幕はデフォルトでオフになっているので、オンに設定します。
指定方法は「src=""」内末尾に「?cc_load_policy=1」を追加します。
これで、字幕表示がオンになります。
src="aaa/bbb/ccc?cc_load_policy=1"
先に「?rel=0」などを追加している場合は、先頭の文字は「&」にします。
何も追加していない場合には「?」を使います。
字幕の言語を指定する
字幕の言語を指定することも出来ます。
とはいえ、動画側で用意のある言語の字幕しか表示されません。
字幕の言語を指定する場合は「&cc_lang_pref=ja」と追加します。
「ja」部分は、どの言語かの指定です。
この場合は日本語を指定しています。
英語の場合は「en」、フランス語なら「fr」とします。
気になる方は「2文字の言語コード」と検索してみましょう。
src="aaa/bbb/ccc?cc_load_policy=1&cc_lang_pref=ja"
「字幕設定」と「言語指定」はどちらを先に書いても動きますが、あとにくっつける方は必ず、先頭の文字を「?」ではなく「&」とするのがポイントです。
