自動埋め込み

空の行に YouTube、Vimeo などの動画リンクを貼り付けると、文書内に 16:9 の動画プレーヤーが表示されます。プラグインは URL のパターンでリンクを識別します。oEmbed などの Web サービスは呼び出しません。

YouTube リンクを単独の行に貼り付けた後のエディター。「Watch the short film」の行の下に、Big Buck Bunny の YouTube プレーヤーがエディターの幅いっぱいに表示されています — 空の段落に `https://www.youtube.com/watch?v=aqz-KE-bpKQ` を貼り付けた結果です。

有効にする

この機能は autoembed.js プラグインで提供されます（plugins/all_plugins.js にも含まれます）。ボタンはありません。プラグインを読み込むと有効になります。

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css" />
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/autoembed.js"></script>

<div id="div_editor1"><p>Watch the short film:</p><p><br></p></div>
<script>
var editor1 = new RichTextEditor("#div_editor1", {
  toolbar: "custom",
  toolbar_custom: "{bold,italic,underline}|{insertlink,insertvideo}|{undo,redo}"
});
</script>

all_plugins.js を読み込むページでは、すでに有効です。貼り付けた動画リンクをリンクのままにするには、autoEmbedEnabled: false を設定します。

対応するリンク

プロバイダー	貼り付けるリンク	プレーヤーの URL
YouTube	`youtube.com/watch?v=ID`, `youtu.be/ID`, `youtube.com/shorts/ID`	`https://www.youtube.com/embed/ID`
Vimeo	`vimeo.com/123456789`, `player.vimeo.com/video/123456789`	`https://player.vimeo.com/video/ID`
Dailymotion	`dailymotion.com/video/ID`, `dai.ly/ID`	`https://www.dailymotion.com/embed/video/ID`
Loom	`loom.com/share/ID`（32 桁の 16 進文字列）	`https://www.loom.com/embed/ID`
CodePen	`codepen.io/USER/pen/ID`	`https://codepen.io/USER/embed/ID?default-tab=result`
TED	`ted.com/talks/NAME`	`https://embed.ted.com/talks/NAME`
Youku	`v.youku.com/v_show/id_ID.html`	`https://player.youku.com/embed/ID`
Coub	`coub.com/view/ID`	`https://coub.com/embed/ID`

プロバイダーごとに厳密なパターンで ID を検証し、固定のテンプレートからプレーヤーの URL を組み立てます。そのため、貼り付けたテキストがそのまま iframe の URL になることはありません。ツイートなど、ほかのサイトのリンクは通常のリンクのままです。

オプション

オプション	既定値	動作
`autoEmbedEnabled`	`true`	貼り付け時の埋め込みを有効または無効にします。どちらの場合も `editor.embedUrl()` は使用できます。
`autoEmbedResolver`	`null`	独自のプロバイダーに対応するための `function (url)` です。`https://` で始まる文字列としてプレーヤーの URL を返します。それ以外を返すと、リンクは変更されません。組み込みの一覧にないリンクに対してのみ呼び出されます。

var editor1 = new RichTextEditor("#div_editor1", {
  autoEmbedResolver: function (url) {
    var m = /^https:\/\/media\.example\.com\/v\/([a-z0-9]+)$/i.exec(url);
    return m ? "https://media.example.com/embed/" + m[1] : null;
  }
});

このリゾルバーでは、https://media.example.com/v/abc123 を貼り付けると、https://media.example.com/embed/abc123 のプレーヤーが作成されました。同じリンクを http:// にするとリゾルバーに一致せず、通常のリンクになりました。

使い方

空の行、またはほかの内容を置かない行にリンクを貼り付けます。その段落がプレーヤーに置き換わり、後ろに空の段落が追加され、そこにカーソルが移動します。
文の途中に貼り付けたリンクはリンクのままです。See this: https://youtu.be/… は See this: <a href="https://youtu.be/…">…</a> になりました。
対象となるのは、URL を 1 つだけ含むプレーンテキストの貼り付けです。空白を含むテキストや選択範囲への貼り付けは、エディターの通常の貼り付け処理に任せます。
スクリプトでは、editor1.embedUrl(url) がカーソル位置にプレーヤーを挿入して true を返します。認識できない URL の場合は false を返します。editor1.embedUrl("https://vimeo.com/76979871") は true を返しました。
サイズを指定できるダイアログを使うには、エディターの Insert Video ボタン（insertvideo）を使用します。

注意点

保存されるマークアップは、プレーヤーを囲むラッパーです。

<div class="rte-embed" contenteditable="false" data-embed="https://www.youtube.com/embed/aqz-KE-bpKQ" style="display:block; margin:12px 0; max-width:720px"><div class="rte-embed-frame" style="position:relative; width:100%; height:0; padding-bottom:56.25%; overflow:hidden; border-radius:10px; background:#000"><iframe src="https://www.youtube.com/embed/aqz-KE-bpKQ" loading="lazy" allowfullscreen="" referrerpolicy="strict-origin-when-cross-origin" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" style="position:absolute; top:0; left:0; width:100%; height:100%; border:0" sandbox="allow-scripts allow-same-origin allow-presentation"></iframe></div></div>

サイズはインラインスタイルで指定されるため、追加の CSS がなくても、表示先のページで 16:9 の比率を保ちます。エディターが sandbox 属性を追加しています。

プレーヤーの作成にネットワーク接続は不要です。オフラインでも、貼り付けると同じマークアップが生成されました。動画自体は閲覧時にプロバイダーから読み込まれるため、プロバイダーにも閲覧者のアクセスが伝わります。
サニタイザーでは、これらの属性を持つ iframe を許可する必要があります。許可するホストは上記のプレーヤーホストに限定してください。Content Security Policy では、frame-src にこれらのホストを含める必要があります。

関連情報：メディア埋め込みのデモ、動画埋め込みのデモ、ブックマークカード。