Incrustación automática

Pega un enlace de YouTube, Vimeo u otro video en una línea vacía y se convertirá en un reproductor de video 16:9 dentro del documento. El plugin reconoce los enlaces por el patrón de su dirección; no consulta oEmbed ni ningún otro servicio web.

El editor después de pegar un enlace de YouTube en una línea independiente: un reproductor de YouTube de Big Buck Bunny ocupa todo el ancho del editor bajo la línea Watch the short film — El resultado de pegar `https://www.youtube.com/watch?v=aqz-KE-bpKQ` en un párrafo vacío.

Cómo activarlo

Esta función la ofrece el plugin autoembed.js (también incluido en plugins/all_plugins.js). No hay ningún botón: basta con cargar el plugin para activarlo.

<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>

Las páginas que cargan all_plugins.js ya lo tienen activado; establece autoEmbedEnabled: false para conservar como enlaces los enlaces de video que pegues.

Enlaces compatibles

Proveedor	Enlace pegado	Dirección del reproductor
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 caracteres hexadecimales)	`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`

El ID se valida con un patrón estricto para cada proveedor y la dirección del reproductor se construye a partir de una plantilla fija, por lo que el texto pegado nunca se usa tal cual como dirección del iframe. Los enlaces de otros sitios, incluidos los tuits, siguen siendo enlaces normales.

Opciones

Opción	Valor predeterminado	Función
`autoEmbedEnabled`	`true`	Activa o desactiva la incrustación al pegar. `editor.embedUrl()` funciona en ambos casos.
`autoEmbedResolver`	`null`	`function (url)` para tus propios proveedores. Devuelve la dirección del reproductor como una cadena que empiece por `https://`, o cualquier otro valor para dejar el enlace intacto. Solo se consulta para los enlaces que no reconoce la lista integrada.

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;
  }
});

Con este resolver, al pegar https://media.example.com/v/abc123 se creó un reproductor para https://media.example.com/embed/abc123. Al pegar el mismo enlace con http:// se creó un enlace: el resolver no lo reconoció.

Cómo usarlo

Pega el enlace en una línea vacía o en una que no vaya a contener nada más. El reproductor sustituye al párrafo y se añade después un párrafo vacío, donde queda el cursor.
Un enlace pegado en medio de una oración sigue siendo un enlace: See this: https://youtu.be/… se convirtió en See this: <a href="https://youtu.be/…">…</a>.
Solo se procesan los pegados de una única dirección en texto sin formato. Si el texto contiene espacios o se pega sobre una selección, se usa el pegado normal del editor.
Desde un script: editor1.embedUrl(url) inserta el reproductor en la posición del cursor y devuelve true, o devuelve false si no reconoce la dirección. editor1.embedUrl("https://vimeo.com/76979871") devolvió true.
Para abrir un cuadro de diálogo con opciones de tamaño, usa el botón Insert Video del editor (insertvideo).

Aspectos a tener en cuenta

El marcado guardado consiste en un contenedor con el reproductor dentro:

<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>

El tamaño se define mediante estilos en línea, por lo que el reproductor conserva su proporción 16:9 en tu página sin CSS adicional. El editor añadió el atributo sandbox .

Crear el reproductor no requiere conexión: sin conexión, el pegado produjo el mismo marcado. El video se carga desde el proveedor cuando alguien lo ve, lo que también significa que el proveedor recibe esa visita.
Tu sanitizador debe permitir iframe con estos atributos y debería permitir únicamente los servidores de los reproductores indicados arriba. Una política de seguridad de contenido necesita incluir esos servidores en frame-src.

Relacionado: demo de incrustación de contenido multimedia, demo de incrustación de video, tarjetas de enlaces.