Incorporação automática

Cole um link de vídeo do YouTube, do Vimeo ou de outro site em uma linha vazia e ele vira um player de vídeo 16:9 no documento. O plugin reconhece os links pelo padrão do endereço; ele não chama oEmbed nem nenhum outro serviço web.

Ative o recurso

O recurso é o plugin autoembed.js (também incluído em plugins/all_plugins.js). Não há botão: carregar o plugin já ativa o recurso.

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

Páginas que carregam all_plugins.js já o têm ativado; defina autoEmbedEnabled: false para manter os links de vídeo colados como links.

Links compatíveis

Provedor	Link colado	Endereço do player
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 hexadecimais)	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

O ID é verificado contra um padrão estrito para cada provedor, e o endereço do player é montado a partir de um modelo fixo; assim, o texto colado nunca vira, tal como está, o endereço do iframe. Links de outros sites, incluindo tweets, continuam sendo links comuns.

Opções

Opção	Padrão	O que faz
autoEmbedEnabled	true	Ativa ou desativa a incorporação ao colar. editor.embedUrl() funciona de qualquer forma.
autoEmbedResolver	null	function (url) para os seus próprios provedores. Retorne o endereço do player como uma string que começa com https://, ou qualquer outra coisa para deixar o link como está. Ele só é consultado para links que a lista incluída não conhece.

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

Com este resolver, colar https://media.example.com/v/abc123 gerou um player para https://media.example.com/embed/abc123. Colar o mesmo link com http:// gerou um link: o resolver não o reconheceu.

Como usar

• Cole o link em uma linha vazia, ou em uma linha que não vai conter mais nada. O parágrafo é substituído pelo player e por um parágrafo vazio depois dele, com o cursor ali.
• Um link colado no meio de uma frase continua sendo um link: See this: https://youtu.be/… virou See this: <a href="https://youtu.be/…">…</a>.
• Só contam colagens de texto simples com um único endereço. Texto com espaços, ou uma colagem sobre uma seleção, fica a cargo da colagem normal do editor.
• Por script: editor1.embedUrl(url) insere o player na posição do cursor e retorna true, ou retorna false para um endereço que não conhece. editor1.embedUrl("https://vimeo.com/76979871") retornou true.
• Para uma caixa de diálogo com opções de tamanho, use o botão Insert Video do editor (insertvideo).

O que você precisa saber

• A marcação salva é um contêiner com o player 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>

  O dimensionamento fica em estilos inline, então o player mantém o formato 16:9 na sua página sem CSS extra. O editor adicionou o atributo sandbox.
• Gerar o player não exige rede: offline, a colagem produziu a mesma marcação. O vídeo em si é carregado do provedor quando alguém o assiste, o que também significa que o provedor vê a visita de quem assiste.
• O seu sanitizador precisa permitir iframe com esses atributos, e deve permitir apenas os hosts de player acima. Uma Content Security Policy precisa desses hosts em frame-src.

Relacionados: demonstração de incorporação de mídia, demonstração de incorporação de vídeo, cards de bookmark.