YouTubeやXの投稿をURLから埋め込めるようになりました（埋め込みブロック）
Ver. 3.2.36から、ブロックエディターに埋め込みブロックが加わり、YouTubeの動画やXの投稿をURLを貼るだけで本文に入れられるようになりました。
埋め込みコードをサービスの画面で探してコピーする手間はありません。動画のページや投稿のURLをそのまま貼ると、a-blog cmsがサービスから埋め込み用のHTMLを取ってきて、ブロックの中に動画や投稿を表示します。埋め込みに対応していないページのURLなら、タイトルと画像の付いたリンクカードになります。
次の画像は、YouTubeの動画を埋め込み、キャプションを付けて公開側で表示したところです。
YouTubeの動画を埋め込む
エントリー編集画面で、本文の空の行にカーソルを置き、行の左に出る「+」を押します。メニューの「挿入」にある「埋め込み」を選ぶと、URLの入力欄が付いたブロックが入ります。本文で「/embed」や「/youtube」と入力して、出てきた「埋め込み」を選んでも同じです。
入力欄に動画のページのURLを貼り、「埋め込む」を押します。今回は
https://www.youtube.com/watch?v=L61p2uyiMSoを貼りました。数秒で、ブロックの中に動画のプレビューが出ます。
ブロックを選ぶと、上にツールバーが出ます。左から、キャプション、配置、通常のリンクに戻すボタン、表示サイズの順に並んでいます。
キャプションのボタンを押し、文字を入れて「適用」を押すと、動画の下にキャプションが付きます。表示サイズは1/1 (100%)から1/4 (25%)までの6段階で、今回は3/4 (75%)にしました。
エントリーを保存し、公開側のページで動画が出ることを確かめます。
公開側では、YouTubeの<iframe>は幅いっぱいに広がり、高さは動画の縦横比に合わせて決まります。YouTubeが返す埋め込みコードは幅と高さが固定ですが、a-blog cmsがwidthとheightを外し、aspect-ratioの指定に置き換えて出力しています。
URLを差し替えたいときは、ブロックの右上の「URLを編集」を押します。
Xの投稿を埋め込む
手順は動画と同じで、投稿のURLを貼ります。今回は@ablogcmsの投稿https://x.com/ablogcms/status/1963429310376939950を貼りました。編集画面のブロックの中にも、公開側にも、Xのページで見るのと同じ形で投稿が表示されました。
Xの投稿は、<iframe>ではなく、Xが配信するJavaScriptで表示する形式です。表示されるまでに数秒かかるので、検証では12秒待ってから撮影しました。
埋め込みに対応していないページはリンクカードになる
ブログ記事のように、埋め込み用のHTMLを返さないページのURLを貼ると、ページのタイトル、画像、説明文を使ったリンクカードになります。次の画像は、developer.a-blogcms.jpの記事のURLを貼ったものです。
カードのタイトルはリンクになっていて、最初は新しいタブで開きます。同じタブで開きたいときは、ブロックを選んでツールバーの「新しいタブで開く」を切り替えます。このボタンは、リンクカードになったブロックにだけ出ます。
カードの見た目は、テーマのCSSで決まります。検証に使ったblogテーマでは、上の画像のように背景色の付いたカードになりました。独自のテーマを使っているサイトでは、.embed-block-cardなどのクラスにCSSを用意します。
埋め込めなかったとき
存在しないドメインのURLを貼ったときのように、埋め込み用のHTMLもタイトルや画像も取れなかったときは、ブロックに「このURLは埋め込めませんでした。」と出ます。
相手のサイトが一時的に応答しなかっただけなら「再試行」、URLを間違えたなら「URLを変更」を押します。それでも取れないページは、「リンクに変換」で、URLをリンクにした普通の段落に戻せます。
貼れるサービスと注意点
埋め込み用のHTMLは、URLを入れたときに一度だけ取りにいき、ブロックに保存します。公開側のページを開くたびにサービスへ問い合わせることはありません。
取ってきたHTMLは、そのまま出力されるわけではありません。HTMLブロックと同じく、コンフィグのhtml_purifier_iframe_allowed_hostsで許可したホストの<iframe>だけが残ります。Xのように<script>で表示するサービスは、html_purifier_script_allowed_hostsで許可したものだけです。検証では、次のサービスのURLを貼ると、編集画面と公開側の両方で埋め込みになりました。
形式 | サービス |
|---|---|
| YouTube、Vimeo、SoundCloud |
| X、Bluesky |
表は2026-10-09に確認した結果です。対応状況や返される埋め込みの形式は、各サービス側の仕様変更により変わることがあります。
許可していないホストのHTMLは、取ってきた時点で取り除かれ、そのブロックはリンクカードになります。公開側のページを出力するときも、同じ許可ホストでもう一度確かめます。あとからホストを許可から外すと、すでに埋め込んだブロックもリンクカードに変わります。
使いたいサービスがリンクカードになってしまうときは、private/config.system.yamlのextends_html_purifier_iframe_allowed_hosts（<script>の形式ならextends_html_purifier_script_allowed_hosts）にホストを足します。書き方はHTMLPurifier による HTML サニタイズにあります。
ホストを足しても、すでにリンクカードになったブロックは埋め込みに戻りません。取ってきた時点で埋め込み用のHTMLを取り除いて保存しているためで、ブロックの「URLを編集」からURLを入れ直します。ただし、取ってきた結果は同じURLごとにサーバーへキャッシュされ、既定では1日残ります。入れ直してもリンクカードのままなら、管理画面のダッシュボードにあるキャッシュ削除で「カスタムフィールド キャッシュ」を消してから入れ直します。今回の検証では、ホストを足す操作も、入れ直す操作も試していません。
編集画面のプレビューで動くJavaScriptは、公開側よりさらに絞られています（コンフィグのblock_editor_embed_preview_script_allowed_hosts）。この一覧にないサービスは、プレビューの代わりに「この埋め込みはエディター上でプレビューできません。公開側の表示で確認してください。」と出ます。その場合は、保存してから公開側のページで表示を確かめてください。
HTMLブロックとの使い分け
同じVer. 3.2.36で入ったHTMLブロックでも、埋め込みコードを貼れば動画や地図を出せます。URLだけで済むサービスなら、埋め込みブロックのほうが手間がかかりません。あとから直す人もURLを差し替えるだけで済みます。
HTMLブロックを使うのは、Googleマップのように、URLではなく埋め込みコードをコピーして使うサービスです。埋め込みコードに付いている幅や高さの指定を、そのまま使いたいときもHTMLブロックにします。
参考
ブロックエディターの基本ブロック。埋め込みブロックの保存形式と、公開時のHTMLの構造があります
HTMLPurifier による HTML サニタイズ。許可ホストの書式と追加のしかたがあります
検証環境
Ver. 3.2.36で、2026-10-09に確認しました。管理画面の表示は、お使いのバージョンによって異なる場合があります。
