YouTubeを埋め込む
- YouTubeを埋め込む簡単な方法
- YouTubeを埋め込むのHTML コード
- <iframe>の遅延読み込み
- YouTubeを埋め込む手順 / WordPress
- YouTubeを埋め込む実際/パラメーター
- YouTubeの動画を消音(ミュート)で再生する
- YouTubeなどの動画の開始時点を指定する簡単な方法
- YouTubeの動画の開始時点と終了時点を指定する
- YouTubeの動画の自動再生を指定する
- YouTubeの関連動画の表示
- YouTubeのリストを表示する・表示しない
- iframe タグを使用しYouTubeを埋め込む時のパラメーター
- YouTubeを埋め込む方法 WordPressブロックエディタ
- YouTubeを埋め込む方法 ショートコード embed
- YouTubeのURL 動画のURLと短縮URL
YouTubeを埋め込む簡単な方法
- YouTube動画の共有→URLコピー
- WordPress の「YouTube埋め込み」ブロックまたは「埋め込み」ブロックにURLを貼る
YouTubeの「共有」よりURLをコピーすると、次のような短縮URLとなります。
https://youtu.be/wa-wq8ygHt0
https://youtu.be/
からはじまるURLは短縮URLです。
これだけで簡単にYouTubeの埋め込みができます。自動再生やミュートなどの設定をする場合は「埋め込む」を選択します。
YouTubeを埋め込むのHTML コード
「共有」→「埋め込む」を選択する。
<iframe width="560" height="315"
src="https://www.youtube.com/embed/wa-wq8ygHt0"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
https://www.youtube.com/
からはじまるURLがYouTubeの動画のURLです。
width属性 | width=”560″ | 横560px |
height属性 | height=”315″ | 高さ315px |
frameborder | frameborder=”0″ | フレームの境界線非表示 |
allowfullscreen | allowfullscreen | 全画面のボタンを表示する |
全画面のボタンを表示しない場合はallowfullscreenを削除します。
<iframe>の遅延読み込み
YouTubeの埋め込みコードをコピーすると、以下の通りです。
<iframe width="560" height="315"・・・・・
これに loading="lazy"
を追記して埋め込みます。
<iframe loading="lazy" width="560" height="315"
src="https://www.youtube.com/embed/wa-wq8ygHt0"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
遅延読み込みとは
ヘージが開かれると同時に、画像や動画などのコンテンツを表示するのではなく、ユーザーの視野に入る時に、それらのコンテンツが表示されるようにすることを遅延読み込みと言います。それにより、ページの読み込み時間を短縮することができ、SEO的にも必要なことです。
YouTubeを埋め込む手順 / WordPress
「埋め込みブロック」でもYouTube を埋め込むことができますが、自動再生などそ指定する場合、「カスタムhtml」ブロックを利用します。
- 動画を右クリックする
- 「埋め込みコードをコピー」をクリック
- 投稿編集でブロックから「カスタムhtml」を選択
- 「カスタムhtml」に「埋め込みコード」を貼る
- コードのURLの後にパラメーターを記述する
YouTubeのパラメーター
YouTubeを埋め込む時に、URLの後ろにパラメーターを付けることで、YouTubeを自動再生を可能にしたり、リピート再生やミュート再生、動画開始時間や終了時間の指定もできます。
YouTubeの「埋め込みコードをコピー」

投稿編集画面で「カスタムhtmlブロック」を選択

「カスタムhtml」ブロックに「埋め込みコード」を貼る

<iframe loading="lazy" width="320" height="560" src="https://www.youtube.com/embed/3pYAKzED09E"
width=”320″ | 横320px |
height=”560″ | 高さ560px |
embed/3pYAKzED09E | IDは3pYAKzED09E |
YouTubeを埋め込む実際/パラメーター
パラメーター(動画のURLの後ろに付ける)
?autoplay=1&mute=1&controls=1&loop=1&playlist=3pYAKzED09E
パラメーターの説明
- 「1」で有効にする 「0」で無効
autoplay=1 | 自動再生 |
mute=1 | ミュート |
controls=1 | ボタンの表示 |
loop=1 | ループ再生 |
playlist=ID | ループ再生のプレイリスト |
modestbranding=1 | Youtubeのロゴの非表示 |
playlistのIDについて
- 埋め込みの場合 https://www.youtube.com/embed/「VIDEO_ID」
「embed/」の後がIDになります。
「?」と「&」 複数のパラメーターを指定する
- https://www.youtube.com/embed/~?(パラメーター)&(パラメーター)
複数のパラメーターを指定する場合「&」で繋ぎます。
?autoplay=1&mute=1&controls=1&loop=1&playlist=3pYAKzED09E
YouTubeの動画を消音(ミュート)で再生する
共有→埋め込みをコピーしてカスタムhtmlに貼り付けます。https://www.youtube.com/embed/~(VIDEO_ID)の後に&mute=1を記述。
mute | mute=1 | 消音再生する |
<iframe loading=”lazy” width=”560″ height=”315″ src=”https://www.youtube.com/embed/wa-wq8ygHt0?&mute=1” frameborder=”0″ allowfullscreen=””></iframe> |
HTML コード(カスタムhtmlに貼る)
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/wa-wq8ygHt0?&mute=1" frameborder="0" allowfullscreen=""></iframe>
複数のパラメーターを指定する場合 &
の後にパラメーターを入れ指定します。
YouTube動画を消音で自動再生・音量ボタンの表示する
<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/wa-wq8ygHt0?autoplay=1&mute=1&controls=1&loop=1&playlist=wa-wq8ygHt0" frameborder="0" allowfullscreen=""></iframe>
autoplay=1 | 自動再生 | 1または0 |
mute=1 | ミュート | 1または0 |
controls=1 | 音量ボタンなどの表示 | 1または0 |
loop=1 | ループ再生 | 1または0 |
playlist=「VIDEO_ID 」 | ループ再生のプレイリスト | |
「VIDEO_ID 」 | wa-wq8ygHt0 | embed/以降 |
YouTubeなどの動画の開始時点を指定する簡単な方法
YouTubeに限らず、ABEMAやTwitterの動画など、開始時間を指定する簡単な方法です。カスタムhtmlではなく、URLの埋め込みで指定できます。
- 動画のULR+?t=秒数
開始時間は秒で指定します。1分30秒ならば90秒です。
t=秒数 | 開始時間を指定 |
「埋め込み」をコピーする必要はありません。URLをコピーするだけです。
- YouTubeの共有→URLをコピー
- 投稿編集画面でそのままURLを貼る
- URLの編集をクリック
- ?t=15を追加
YouTubeのURLは次の通りです。
https://youtu.be/wa-wq8ygHt0?t=15 |
コピーしたURLを貼り編集(鉛筆のアイコン)をクリック

?t=15を追加する

YouTubeの動画の開始時点と終了時点を指定する
開始時間と終了時間は秒で指定します。1分30秒ならば90秒です。
start= | 開始時間を指定 |
end= | 終了時間を指定 |
複数のパラメーターを指定する場合&
の後にパラメーターを入れ指定します。
- 共有→埋め込みをコピーして、&start=15を追加。
<iframe loading=”lazy” width=”560″ height=”315″ src=”https://www.youtube.com/embed/wa-wq8ygHt0? &start=15“ frameborder=”0″allowfullscreen></iframe> |
HTML コード(15秒から開始の場合)(カスタムhtmlに貼る)
<iframe loading="lazy" width="560" height="315"
src="https://www.youtube.com/embed/wa-wq8ygHt0?&start=15"frameborder="0"
allowfullscreen></iframe>

15秒から開始(上記のHTMLコードで再生)
YouTubeの動画の自動再生を指定する
autoplay | autoplay=1 | 自動再生する |
複数のパラメーターを指定する場合 &
の後にパラメーターを入れ指定します。
- 共有→埋め込みをコピーして、&autoplay=1を追加。
<iframe loading=”lazy” width=”560″ height=”315″ src=”https://www.youtube.com/embed/wa-wq8ygHt0?&autoplay=1“ frameborder=”0″allowfullscreen></iframe> |
HTML コード(カスタムhtmlに貼る)
<iframe loading="lazy" width="560" height="315"
src="https://www.youtube.com/embed/wa-wq8ygHt0?&autoplay=1"frameborder="0"
allowfullscreen></iframe>
自動再生による埋め込み動画の再生は、視聴回数としてカウントされません。
YouTubeの関連動画の表示
現在、関連動画は無効にはできません。ループ再生にすると関連動画は表示されません。
rel | rel=0 | 再生した動画と同じチャンネルから関連動画が選択される |
YouTubeのリストを表示する・表示しない
videoseries?list | videoseries?list=再生リスト ID | 再生リストを表示させる |
「videoseries?list=再生リスト ID 」を削除すると再生リストが表示されません。
<iframe loading=”lazy” width=”560″ height=”315″ src=”https://www.youtube.com/embed/ videoseries?list=再生リストID” frameborder=”0″ allow=”autoplay; encrypted-media” allowfullscreen></iframe> |
iframe タグを使用しYouTubeを埋め込む時のパラメーター
参考 YouTube リファレンス
IFrame URL にパラメータを追加すると、アプリケーション内での再生方法をカスタマイズできます。たとえば
https://developers.google.com/youtube/player_parameters?hl=jaautoplay
パラメータによる動画の自動再生や、loop
パラメータによる動画の繰り返し再生が可能です。
<iframe>
タグを使用するsrc
にURL に指定する- パラメーターを指定する
- 複数のパラメーターの指定は
&
で記述
iframe タグのパラメーター
width | width=”640″ | 横のサイズを指定 |
height | height=”360″ | 高さのサイズを指定 |
frameborder | frameborder=”0″ | フレームボーダーなし |
allowfullscreen | allowfullscreen | 画面 |
mute | mute=1 | 消音(ミュート) |
autoplay | autoplay=1 | 自動再生 |
loop | loop=1 | ループ(繰返し)再生 |
rel | rel=0 | 関連動画の設定 |
playlist | playlist=再生リストID | 再生リストを表示 |
modestbranding | modestbranding=1 | YouTubeのロゴを非表示 |
複数のパラメーターを指定する場合&
の後にパラメーターを入れ指定します。
参考
YouTubeを埋め込む方法 WordPressブロックエディタ
WordPressブロックエディタで動画を埋め込む方法はいくつかあります。
- カスタムhtml
- 埋め込み「YouTube」を使用
embed
ショートコードを使用- クラシックのメディア挿入編集を使用
ブロックエディッタ→埋め込み→YouTube

埋め込み「YouTube」の設定

埋め込み「YouTube」の高度な設定 アスペクト比の変更
高度な設定をクリックすると「wp-embed-aspect-4-3」と記載があります。4-3はアスペクト比なので、これを変更するとアスペクト比が変わります。
- スタンダードなアスペクト比 4:3
- ハイビジョン 16:9
埋め込み「YouTube」の高度な設定 キャプションの設定
- 動画の下、キャプション入力部分をクリック
- キャプションの文字の色などを指定
YouTubeを埋め込む方法 ショートコード embed
https://youtu.be/~を埋め込む
[embed]https://youtu.be/wa-wq8ygHt0[/embed]
https://www.youtube.com/embed/~を埋め込む
[embed width="300" height="200"]https://www.youtube.com/embed/wa-wq8ygHt0[/embed]
YouTube ショート動画を縦長で表示する方法/サイズを合わせる方法
参考 https://support.google.com/youtube/answer/171780?hl=ja
YouTubeの音量を調整またはミュート(消音)にする
IFrame Player API を使用し、Youtubeの音量調整ができます。
参考 https://developers.google.com/youtube/iframe_api_reference?hl=ja
YouTubeのURL 動画のURLと短縮URL
YouTubeのURLについて
YouTubeの短縮URL(共有→URLコピー)
https://youtu.be/wa-wq8ygHt0
YouTubeの動画URL(共有→動画の埋め込み)
https://www.youtube.com/embed/wa-wq8ygHt0
YouTubeの動画URL
https://www.youtube.com/watch?v=wa-wq8ygHt0
VIDEO_ID は、wa-wq8ygHt0 です。watch?v 以下、またはembed/以下。
現在は利用されない方法
ブロックエディタの「クラシック」のメディア挿入編集を使用
従来のように「クラシック」ブロックでYouTubeを埋め込むことができます。
- ブロックエディッタ(+)を開く
- 埋め込みのYouTubeをクリックする
- リンクを貼りつける
- 埋め込みをクリックする
