YouTube埋め込みブロックではパラメーターを追加できない-解決策

2025年5月10日

当ページの一部リンクにはプロモーションが含まれてます。

Youtubeにはパラメーターと呼ばれるいわばオプション機能のようなものが備わってます。
たとえば同一チャンネル内の関連動画に限定用の「rel=0」などですね。

しかしながらブロックエディターに標準搭載されてる「Youtube埋め込み」というブロックを使った埋め込みではこれらのパラメーターを利用することができません。

ということで今回は別の方法でのやり方をご紹介します。

こちらはブロックエディター汎用カスタマイズ記事です。

Youtubeのパラメーター

先にYoutubeで使えるパラメーターのうちよく使われそうなものをいくつかピックアップしておきます。

rel=0

そのチャンネル内の関連動画に限定表示。
ほかのサイトに行ってほしくないようなときに使ったりします。

autoplay=1&mute=1

ページを開いた時点で動画を自動再生。なのでファーストビューでYoutube動画が見えてないとあまり意味はないかもです。
「mute=1」というのは音声が最初からOFFという意味です。（ユーザー側でONにできます）
ページを開いたら急に音が出てしまって気まずい状況になるのを避ける配慮でしょうか。
なお2つはペアで指定します。

本日の時点ではモバイル機器では無効のようでPC限定のパラメーターになります。

start=再生開始位置（秒数）

指定の位置から動画を再生。1分後からならstart=60。
指定の位置で動画を停止させるには『end=再生停止位置（秒数）』。たとえば1分20秒で停止させたいならend=80になります。

frameborder="1"

再生画面の周囲に1pxの枠線を表示。
白背景のサムネイル画像だと白背景のページではどこまでがYoutube画面かがわかりにくかったりします。
こちらは追加ではなく最初から埋め込まれてるframeborder="0"のところを1に変えてやります。
なおこのあとご紹介する追加スタイルで独自に設定することもできます。

複数のパラメーターを付けるとき、順番はどれが最初でもいいのですが最初のパラメーターの前には半角の「?」を付けます。それ以降のパラメーターは同じく半角の「&」で連結していきます。
たとえば「?rel=0&start=60」のように。
（※具体的な書き方は後述）

使うのはカスタムHTMLブロック

使い勝手	設置レベル
あれば便利	設定がやや面倒なので作業工程・やや難

カスタマイズレベル

ブロックエディターには標準で「Youtube埋め込み」という便利なブロックがあります。

これはYoutubeのURLをコピー＆ペーストするだけでYoutube画面を表示してくれるというものでかなり便利なブロックです。

テーマにもよりますが、Youtube画面の表示幅は最大でも560pxなので、コンテンツ幅がそれよりも広いテーマの場合は少し狭く表示されます。（詳しくはこのあとの「再生画面の幅調整」をご参照ください）
一方テーマSWELLの場合は最初からコンテンツ幅いっぱいでの表示になります。

このYoutube埋め込みブロック内にパラメーターを仕込むには一度HTML表記に戻す必要があります。
そこでツールバーの『︙』をクリックして出てくる「HTMLとして編集」を選択してHTML表記に変えてみます。
すると下のようなHTMLで表示されました。

サイト管理人

上のコードはテーマSWELLでのものなので、他のテーマでは一部異なるコードが排出されます。

通常パラメーターを追加するには<iframe src="//www.youtube.com/embed/xxxの後ろに付けます。
しかしながらHTMLに分解したYoutube動画のURL（赤下線部分）表記内に「embed」の文字は見当たりません。
つまりこの状態ではパラメーターを追加できないんです。

ではもしもパラメーターを仕込む必要があった場合はどうするかというと、「Youtube埋め込み」ブロックは使わず「カスタムHTML」ブロックを使って追加します。

パラメーターなんぞ何も付けないよという場合は「Youtube埋め込み」ブロックの方がラクです。

実際の書き方

まずは表示したいYoutubeをブラウザ上で開きます。
次に「共有」をクリックします。

下のような画面が出るので今度は「埋め込む」をクリックします。

コード部分をクリックするとテキストが反転するので、テキスト上で右クリック→コピーを選択します。

Youtubeを表示したい場所でカスタムHTMLブロックを挿入します。
その中にCtrl＋Vで先ほどの埋め込みコードをペーストします。
今度はちゃんと「embed」がありますね。この中にパラメーターを加筆していきます。

追加する場所はYoutube動画の固有のID（※下の画像の青下線部分）の直後になります。
前述したように「?」を付けて最初のパラメーターを、複数付けたい場合はそのあとに「&」を付けて追記していきます。

ここで埋め込みコードをよく見ると、すでに「?si＝」で始まるコード（※緑下線部分）が付いてます。
これはYoutube側が自動で付与する”視聴者セッション情報を記録するためのパラメーター”とのこと。
それなりの意味はあるんですが詳細を読んでも私にはよくわかりませんでしたww。
ただここを削除しても視聴自体は問題ないそうです。

ということでここでは「?si=xxx」の部分（※緑下線部分）を削除した状態での説明にしていきます。

削除すると不安という方はそのまま残してください。その場合は緑下線部分の最後に「&」を付けて追記します。

たとえば”同一チャンネル内の関連動画だけに限定”させるべく「rel=0」を付けたいのであれば、下のように固有IDの後ろに「?rel=0」と追記します。

”1分後からの再生”オプションも足したいなら「rel=0」のあとに「&start=60」と書き足します。

これでパラメーターを付加したYoutube画面の作成は”一応”完了です。

再生画面の幅調整

YouTubeから埋め込みコードを取得する場合、デフォルトでは幅560px×高さ315pxになります。

このままだとYoutube画面表示幅は560pxでの幅になり、昨今の広い画面のPCではやや小さく表示されてしまいます。もちろん再生時にはユーザー側でフル画面での表示にも切り替え可能です。
（モバイル機器では画面幅での表示）

カスタムHTML埋め込みでの実際の表示（※PC画面用）

これを最初からコンテンツ幅いっぱいで表示させたいというのであればもう一工夫必要です。
そのやり方の一例をご紹介します。

コード内の数値（width="560" height="315"）を直接変更することでも対処できます。
ただし変更後の数値は16:9になるように指定する必要があるのと、何より毎回変更するよりはこの後紹介するスタイルでの一括設定の方が手間がかかりません。

まずは先ほどまでのYoutube用のコード全体を適当なクラス名をつけたブロックコードで囲ってやります。
（下の赤文字部分。ここでは「youtube-ratio」というクラス名を付けてます）

次に追加CSSや子テーマの「style.css」などに下のようなスタイルを追記します。

@media screen and (min-width: 1025px) {
	.youtube-ratio iframe {
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
	}
}

これでコンテンツ幅いっぱいでの表示になります。

クラス名を別の名称に変えたい場合は、カスタムHTML内の「youtube-ratio」と追加スタイル内の「youtube-ratio」の2ヵ所を変えます。

この記事が気に入ったら
フォローしてね！

Follow @web_trace

よかったらシェアしてね！

YouTube埋め込みブロックではパラメーターを追加できない-解決策

Youtubeのパラメーター

使うのはカスタムHTMLブロック

実際の書き方

再生画面の幅調整

コメント

コメントするコメントをキャンセル

YouTube埋め込みブロックではパラメーターを追加できない-解決策

Youtubeのパラメーター

使うのはカスタムHTMLブロック

実際の書き方

再生画面の幅調整

コメント

コメントする コメントをキャンセル

コメントするコメントをキャンセル