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

YouTubeの埋め込み
WordPress
Advertisements

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

Advertisements

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

共有→埋め込みをコピーして貼り付けます。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 コード

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

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

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秒から開始の場合)

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

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

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

autoplayautoplay=1自動再生する

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

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

HTML コード

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

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

YouTubeの関連動画を表示しない

relrel=0関連動画無効

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

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

HTML コード

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

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>

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再生リストを表示

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

(引用 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 リファレンス

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

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

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

ブロックエディタの埋め込み「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. キャプションの文字の色などを指定

 ショートコード 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]

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

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

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

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

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

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

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

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

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

動画のパラメーター

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

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

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

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

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

Advertisements
タイトルとURLをコピーしました