YouTubeを埋め込む実際/自動再生とリピート再生とミュート　WP

WordPressにYouTubeを埋め込む実際
WordPressにYouTubeを埋め込む手順
WordPressにYouTubeを埋め込む実際/パラメーター
WordPressにYouTubeを埋め込むHTML コード
WordPressにYouTubeを埋め込む実際/埋め込みコード
埋め込みコードにパラメーターを追加する
YouTube ショート動画を表示する時の縦横比の指定
YouTube ショート動画を表示/2カラム
WP 2カラムにした場合、モバイルでどう表示されるか？

WordPressにYouTubeを埋め込む実際

上の動画のYouTubeを埋め込むのに利用したパラメーター

autoplay	自動再生
mute	ミュート
controls	ボタンの表示
loop	ループ再生
playlist	ループ再生のプレイリスト

以下のコードを埋め込んでいます。

<div class="youtube"><iframe width="320" height="560" src="https://www.youtube.com/embed/3pYAKzED09E?autoplay=1&mute=1&controls=1&loop=1&playlist=3pYAKzED09E" title="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>

WordPressにYouTubeを埋め込む手順

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

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

YouTubeのパラメーター

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

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

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

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

パラメーターの説明

「１」で有効にする・「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

WordPressにYouTubeを埋め込むHTML コード

WordPressにYouTubeを埋め込むHTML コード、パラメーターについては、下のページに詳しく記載しています。そちらも参考にしてみてください。

パラメーターとその役割については下のリンクに詳しく記載しています。

WordPressにYouTubeを埋め込む実際/埋め込みコード

動画の「埋め込みコード」をコピーして、投稿編集の「カスタムhtmlブロック」に貼ります。

埋め込む動画を右クリックする
「埋め込みコードをコピー」をクリック
投稿編集画面で「htmlブロック」を選択
「カスタムhtml」ブロックに「埋め込みコード」を貼る

これで、ブログでYouTubeが再生できます。

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

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

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

<iframe width="320" height="560" src="https://www.youtube.com/embed/3pYAKzED09E"

width=”320″	横320px
height=”560″	高さ560px
embed/3pYAKzED09E	IDは3pYAKzED09E

playlist=ID
playlist=3pYAKzED09E とすると、この動画がエンドレスにループ再生する

自動再生とミュートとミュート解除ボタン

ミュート再生
ミュート・ミュート解除ボタン

表示されるサイズによってはミュートボタンが表示されない場合があるので、表示されるように、パラメーター「controls」を使います。

埋め込みコードにパラメーターを追加する

上記にあるパラメーターを「src=”https://www.youtube.com/embed/～」の後に追加します。

<iframe width="320" height="560" src="https://www.youtube.com/embed/3pYAKzED09E?autoplay=1&mute=1&controls=1&loop=1&playlist=3pYAKzED09E" title="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

赤文字が追加したパラメーターです。これで、「自動再生」「ミュート再生」「ループ再生」「ボタンの表示あり」になります。

autoplay=1	自動再生
mute=1	ミュート
controls=1	ボタンの表示
loop=1	ループ再生
playlist=ID	ループ再生のプレイリスト

YouTube ショート動画を表示する時の縦横比の指定

次の2つの手順でショート動画の縦横比を 9：16 にします。

カスタムhtmlに貼ったこーをを<div class="youtube">～</div>で囲む
テーマファイルエディッタで縦横比を指定する

`<div class="youtube">`～`</div>`で囲む

<div class="youtube">
</div>

<div class=”youtube”>～</div>で囲むと次のようになります。

<div class="youtube"><iframe width="320" height="560" src="https://www.youtube.com/embed/3pYAKzED09E?autoplay=1&mute=1&controls=1&loop=1&playlist=3pYAKzED09E" title="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div>

テーマファイルエディッタで縦横比を指定する

YouTubeのショート動画を埋め込む時に、通常のYouTubeの比率（横長）になってしまう場合、動画が縦長（9：16）になるように指定します。

テーマファイルエディッタで指定する

「外観」→「テーマファイルエディッタ」を開く
スタイルシート (style.css)に下の記述を追加する

/*ショート動画を縦型に*/
.youtube iframe {
  position: relative;
  aspect-ratio:9 /16; /
}

.youtube .video {
  height: 100%;
  margin: 0 auto;
  overflow: visible;
  padding-bottom: 0;
  width: 300px;   /* ビデオ横幅 */
}

コードの説明

aspect-ratio:9 /16	アスペクト比（ビデオの横/縦比）
margin: 0 auto	横方向は中央になるようにautoとする
overflow: visible	動画が枠よりオーバーした時は枠からはみ出す
overflow: hidden	動画が枠よりオーバーした時は枠に合わせてカットされる
overflow: scroll	スクロールバーが常に表示され、枠に合わせてカットされ表示される