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

YouTubeの埋め込み WP CSS

YouTubeを埋め込む

Sponsor

YouTubeを埋め込む簡単な方法

  1. YouTube動画の共有→URLコピー
  2. WordPress の「YouTube埋め込み」ブロックまたは「埋め込み」ブロックにURLを貼る

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

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

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

これだけで簡単にYouTubeの埋め込みができます。自動再生やミュートなどの設定をする場合は「埋め込む」を選択します。

Sponsor

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

全画面のボタンを表示しない場合は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>

iframe loading="lazy"

  • <iframe>の遅延読み込み

動画をファーストビュー（動画を上の方）に配置する場合、埋め込み動画の遅延読み込みが機能しない。

遅延読み込みとは

ヘージが開かれると同時に、画像や動画などのコンテンツを表示するのではなく、ユーザーの視野に入る時に、それらのコンテンツが表示されるようにすることを遅延読み込みと言います。それにより、ページの読み込み時間を短縮することができ、SEO的にも必要なことです。

YouTubeを埋め込む手順 / WordPress

「埋め込みブロック」でもYouTube を埋め込むことができますが、自動再生などそ指定する場合、「カスタムhtml」ブロックを利用します。

  1. 動画を右クリックする
  2. 「埋め込みコードをコピー」をクリック
  3. 投稿編集でブロックから「カスタムhtml」を選択
  4. 「カスタムhtml」に「埋め込みコード」を貼る
  5. コードのURLの後にパラメーターを記述する

YouTubeのパラメーター

YouTubeを埋め込む時に、URLの後ろにパラメーターを付けることで、YouTubeを自動再生を可能にしたり、リピート再生やミュート再生、動画開始時間や終了時間の指定もできます。

YouTubeの「埋め込みコードをコピー」

埋め込みコードをコピーする
コードをコピー

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

カスタムhtmlブロックを開く
htmlブロックの選択

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

コードを貼る
コードを貼る
<iframe loading="lazy" width="320" height="560" src="https://www.youtube.com/embed/3pYAKzED09E"
width=”320″横320px
height=”560″高さ560px
embed/3pYAKzED09EIDは3pYAKzED09E

YouTubeを埋め込む実際/パラメーター

パラメーター（動画のURLの後ろに付ける）

?autoplay=1&mute=1&controls=1&loop=1&playlist=3pYAKzED09E

パラメーターの説明

  • 「１」で有効にする 「0」で無効
autoplay=1自動再生
mute=1ミュート
controls=1ボタンの表示
loop=1ループ再生
playlist=IDループ再生のプレイリスト
modestbranding=1Youtubeのロゴの非表示

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を記述。

mutemute=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-wq8ygHt0embed/以降

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を追加する

動画の開始時点を指定する簡単な方法 /YouTubeを埋め込む
12秒を追加

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>
動画の開始時点を指定する方法 /YouTubeを埋め込む
動画の開始時点を指定する方法

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

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

autoplayautoplay=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の関連動画の表示

現在、関連動画は無効にはできません。ループ再生にすると関連動画は表示されません。

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

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

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

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

iframe タグのパラメーター

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

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

参考

YouTube リファレンス

YouTubeを埋め込む方法 WordPressブロックエディタ

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

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

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

YouTubeを選択する
YouTubeを選択

埋め込み「YouTube」の設定

高度な設定を開く
YYouTubeの高度な設定

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

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

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

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

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

 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 ショート動画を縦長で表示する方法/サイズを合わせる方法

YouTube ショート動画を埋め込む 縦長9：16で表示させる
ショート動画を埋め込むYouTube ショート動画を埋め込むYouTubeのショート動画を埋め込むには2つの方法があります。埋め込みブロックで埋め込むカスタムhtmlで埋め込むYouTube ショート動画をそのまま埋め込むと次のように表示さ...
wordpress.news-vouge.com

参考 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を埋め込むことができます。

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

ブラグインのインストールなど、サイトを変更する場合は、バックアップをとって行ってください。

WP CSS
人気
Sponsor
ゆきををフォローする
ゆきを