sponsor

変更する前にバックアップすることをオススメします。

WordPressにYouTubeを埋め込む時ミュート再生や自動再生にする方法

YouTubeの埋め込み WP CSS
YouTubeの埋め込み
WP CSS
sponsor

YouTubeのURL 動画のURLと短縮URL

YouTubeのURL

  • 短縮 https://youtu.be/～（VIDEO_ID）
  • 埋め込み https://www.youtube.com/embed/～（VIDEO_ID）
  • 視聴 https://www.youtube.com/watch?v=～（VIDEO_ID）

YouTubeの「共有」よりURLをコピー

YouTubeの「共有」よりURLをコピーすると、次のような短縮URLとなります。

https://youtu.be/wa-wq8ygHt0
https://youtu.be/

からはじまるURLは短縮URLです。

「共有」の「埋め込む」の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
frameborderframeborder=”0″フレームの境界線非表示
allowfullscreenallowfullscreen全画面のボタンを表示する

全画面のボタンを表示しない場合はallowfullscreenを削除します。

YouTubeの「VIDEO_ID 」とは

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/以下。

sponsor

YouTubeの動画を消音（ミュート）で再生する

共有→埋め込みをコピーしてカスタムhtmlに貼り付けます。https://www.youtube.com/embed/～（VIDEO_ID）の後に&mute=1を記述。

mutemute=1消音再生する
<iframe width=”560″ height=”315″
src=”https://www.youtube.com/embed/wa-wq8ygHt0?&mute=1”
frameborder=”0″ allowfullscreen=””></iframe>

HTML コード（カスタムhtmlに貼る）

<iframe width="560" height="315" src="https://www.youtube.com/embed/wa-wq8ygHt0?&mute=1" frameborder="0" allowfullscreen=""></iframe>

複数のパラメーターを指定する場合 & の後にパラメーターを入れ指定します。

YouTube動画を消音で自動再生・音量ボタンの表示する

<iframe 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&playlist=「VIDEO_ID 」ループ再生1または0
「VIDEO_ID 」wa-wq8ygHt0embed/以降
sponsor

YouTubeなどの動画の開始時点を指定する簡単な方法

YouTubeに限らず、ABEMAやTwitterの動画など、開始時間を指定する簡単な方法です。カスタムhtmlではなく、URLの埋め込みで指定できます。

  • 動画のULR+?t=秒数

開始時間は秒で指定します。1分30秒ならば90秒です。

t=秒数開始時間を指定

「埋め込み」をコピーする必要はありません。URLをコピーするだけです。

  1. YouTubeの共有→URLをコピー
  2. 投稿編集画面でそのままURLを貼る
  3. URLの編集をクリック
  4. ?t=15を追加

YouTubeのURLは次の通りです。

https://youtu.be/wa-wq8ygHt0?t=15

コピーしたURLを貼り編集（鉛筆のアイコン）をクリック

動画の開始時点を指定する簡単な方法
動画の開始時点を指定する簡単な方法

?t=15を追加する

動画の開始時点を指定する簡単な方法
動画の開始時点を指定する簡単な方法
sponsor

YouTubeの動画の開始時点と終了時点を指定する

開始時間と終了時間は秒で指定します。1分30秒ならば90秒です。

start=開始時間を指定
end=終了時間を指定

複数のパラメーターを指定する場合& の後にパラメーターを入れ指定します。

  • 共有→埋め込みをコピーして、&start=15を追加。
<iframe width=”560″ height=”315″
src=”https://www.youtube.com/embed/wa-wq8ygHt0?
&start=15“
frameborder=”0″allowfullscreen></iframe>

HTML コード（15秒から開始の場合）（カスタムhtmlに貼る）

<iframe width="560" height="315"
src="https://www.youtube.com/embed/wa-wq8ygHt0?&start=15"frameborder="0" 
allowfullscreen></iframe>
動画の開始時点を指定する方法
動画の開始時点を指定する方法

15秒から開始（上記のHTMLコードで再生）

sponsor

YouTubeの動画の自動再生を指定する

autoplayautoplay=1自動再生する

複数のパラメーターを指定する場合 & の後にパラメーターを入れ指定します。

  • 共有→埋め込みをコピーして、&autoplay=1を追加。
<iframe width=”560″ height=”315″
src=”https://www.youtube.com/embed/wa-wq8ygHt0?&autoplay=1“
frameborder=”0″allowfullscreen></iframe>

HTML コード（カスタムhtmlに貼る）

<iframe width="560" height="315"
src="https://www.youtube.com/embed/wa-wq8ygHt0?&autoplay=1"frameborder="0" 
allowfullscreen></iframe>

自動再生による埋め込み動画の再生は、視聴回数としてカウントされません。

sponsor

YouTubeの関連動画の表示

関連動画は無効にはできません。

relrel=0再生した動画と同じチャンネルから関連動画が選択される

複数のパラメーターを指定する場合& の後にパラメーターを入れ指定します。

  • 共有→埋め込みをコピーして、&rel=0を追加。
<iframe width=”560″ height=”315″
src=”https://www.youtube.com/embed/wa-wq8ygHt0?&rel=0“
frameborder=”0″allowfullscreen></iframe>

HTML コード（カスタムhtmlに貼る）

<iframe width="560" height="315"
src="https://www.youtube.com/embed/wa-wq8ygHt0?&rel=0"frameborder="0" 
allowfullscreen></iframe>
sponsor

YouTubeのリストを表示する・表示しない

videoseries?listvideoseries?list=再生リスト ID 再生リストを表示させる

「videoseries?list=再生リスト ID 」を削除すると再生リストが表示されません。

<iframe width=”560″ height=”315″
src=”https://www.youtube.com/embed/
videoseries?list=再生リストID”
frameborder=”0″ allow=”autoplay; encrypted-media” allowfullscreen></iframe>
sponsor

iframe タグを使用しYouTubeを埋め込む時のパラメーター

参考 YouTube リファレンス

IFrame URL にパラメータを追加すると、アプリケーション内での再生方法をカスタマイズできます。たとえば autoplay パラメータによる動画の自動再生や、loop パラメータによる動画の繰り返し再生が可能です。

https://developers.google.com/youtube/player_parameters?hl=ja
  • <iframe> タグを使用する
  • src にURL に指定する
  • パラメーターを指定する
  • 複数のパラメーターの指定は& で記述

例 15秒からミュートで再生する

&mute=1&start=15

iframe タグのパラメーター

widthwidth=”640″横のサイズを指定
heightheight=”360″高さのサイズを指定
frameborderframeborder=”0″フレームボーダーなし
allowfullscreenallowfullscreen画面
mutemute=1消音（ミュート）
autoplayautoplay=1自動再生
looploop=1ループ（繰返し）再生
relrel=0関連動画の設定
playlistplaylist=再生リストID再生リストを表示
modestbrandingmodestbranding=1YouTubeのロゴを非表示

複数のパラメーターを指定する場合& の後にパラメーターを入れ指定します。

例 （引用 YouTube リファレンス）

<iframe id="ytplayer" type="text/html" width="640" height="360"
  src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com"
  frameborder="0"></iframe>

参考

YouTube リファレンス

sponsor

WordPressブロックエディタ（Gutenberg）で動画を埋め込む

WordPressブロックエディタ（Gutenberg）で動画を埋め込む方法はいくつかあります。

  • カスタムhtml
  • 埋め込み「YouTube」を使用
  • embed ショートコードを使用
  • クラシックのメディア挿入編集を使用
sponsor

ブロックエディタの埋め込み「YouTube」を使用

  1. ブロックエディッタ（+）を開く
  2. 埋め込みのYouTubeをクリックする
  3. リンクを貼りつける
  4. 埋め込みをクリックする

ブロックエディッタ→埋め込み→YouTube

YouTubeの埋め込み
YouTubeの埋め込み

埋め込み「YouTube」の設定

設定を開くと高度な設定ができます。

YouTubeの埋め込み
YouTubeの埋め込み

埋め込み「YouTube」の高度な設定 アスペクト比の変更

高度な設定をクリックすると「wp-embed-aspect-4-3」と記載があります。4-3はアスペクト比なので、これを変更するとアスペクト比が変わります。

  • スタンダードなアスペクト比 4:3
  • ハイビジョン 16:9

埋め込み「YouTube」の高度な設定 キャプションの設定

  1. 動画の下、キャプション入力部分をクリック
  2. キャプションの文字の色などを指定
sponsor

 ショートコード embed でYouTubeを埋め込む

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]
sponsor

ブロックエディタの「クラシック」のメディア挿入編集を使用

従来のように「クラシック」ブロックでYouTubeを埋め込むことができます。

  1. ブロックエディッタ（+）を開く
  2. 埋め込みのYouTubeをクリックする
  3. リンクを貼りつける
  4. 埋め込みをクリックする
YouTubeの埋め込み
YouTubeの埋め込み
sponsor

WP ブロックエディッタの動画埋め込み

  1. ブロックエディッタ（+）を開く
  2. メディアの動画をクリックする
  3. アップロード・メディアライブラリ・URLから挿入から選択
  4. YouTubeのURLを挿入するとYouTubeの埋め込みエディッタになる
YouTubeの埋め込み
YouTubeの埋め込み
sponsor

動画埋め込みのパラメーター

動画を埋め込んだ場合、次の指定ができます。

  • controls コントロール
  • muted ミュート
  • autoplay 自動再生
  • loop ループ
  • playsinline インライン再生
YouTubeの埋め込み
YouTubeの埋め込み

自動再生、ループ、消音（ミュート）を指定。

動画のパラメーター

controlscontrols=0動画下部のコントロールバーを非表示にする
autoplayautoplay=1自動再生する
looploop=1ループ再生する
mutedmuted=1ミュート

参考 https://support.google.com/youtube/answer/171780?hl=ja

sponsor

YouTubeの音量を調整またはミュート（消音）にする

IFrame Player API を使用し、Youtubeの音量調整ができます。

参考 https://developers.google.com/youtube/iframe_api_reference?hl=ja

sponsor