Flexweg CMS

Embeds (YouTube, Vimeo, Twitter, Spotify)

Flexweg CMS embarque quatre providers d'embed out-of-the-box : YouTube, Vimeo, Twitter/X et Spotify. Chacun est son propre bloc dans l'inserter ; coller une URL parse l'ID de la ressource et rend

Flexweg CMS embarque quatre providers d'embed out-of-the-box : YouTube, Vimeo, Twitter/X et Spotify. Chacun est son propre bloc dans l'inserter ; coller une URL parse l'ID de la ressource et rend l'iframe / blockquote officiel du provider au moment de la publication.

Les embeds sont fournis par le must-use flexweg-embeds (toujours actif). Les désactiver n'est pas possible (ils sont must-use) ; mais si vous n'en avez pas besoin, n'insérez simplement pas les blocs.

Comment insérer

Option 1 — l'inserter

Tapez / puis le nom du provider :

  • /youtube → bloc YouTube
  • /vimeo → bloc Vimeo
  • /twitter (ou /x) → bloc Twitter / X
  • /spotify → bloc Spotify

Le bloc s'insère avec un attribut data-id vide. Utilisez l'inspecteur (sidebar droite, onglet Bloc) pour coller l'URL.

Option 2 — coller une URL directement

Collez une URL YouTube / Vimeo / Twitter / Spotify dans un paragraphe. L'éditeur reconnaît le pattern d'URL et convertit automatiquement le paragraphe en bloc d'embed correspondant.

Patterns d'URL reconnus :

  • YouTube : https://www.youtube.com/watch?v=..., https://youtu.be/..., https://www.youtube.com/embed/...
  • Vimeo : https://vimeo.com/<id>, https://player.vimeo.com/video/<id>
  • Twitter / X : https://twitter.com/<user>/status/<id>, https://x.com/<user>/status/<id>
  • Spotify : https://open.spotify.com/track/..., /album/..., /playlist/..., /episode/...

Rendu à la publication

Chaque provider rend son contenu différemment :

  • YouTube / Vimeo / Spotify : iframe officiel (responsive, lazy-loaded)
  • Twitter / X : blockquote oEmbed avec un <script> de widgets.js injecté en body-end

Le script widgets.js de Twitter n'est injecté que si la page contient au moins un embed Twitter (détecté pendant le rendu du post.html.body via un Set partagé entre les hooks). Pas de tweet → pas de script.

YouTube / Vimeo / Spotify n'ont pas besoin de script — les iframes officielles font tout. Donc pas de poids JavaScript supplémentaire sur les pages avec ces embeds.

CSS

Chaque provider a une baseline CSS minuscule (responsive container, aspect ratio) injectée via un <style> dans <head> quand au moins un embed est détecté sur la page. Ça gère le ratio 16/9 pour YouTube/Vimeo et le sizing du blockquote Twitter.

Ajouter un nouveau provider

Le système d'embeds est extensible. Un plugin peut ajouter un provider en :

  1. Ajoutant une entrée dans la liste des providers (URL parser, renderHtml(id), preview optionnel, bodyScript optionnel)
  2. Enregistrant le bloc Tiptap correspondant via pluginApi.registerBlock

Voir le code source de flexweg-embeds pour le pattern. C'est ~30 lignes par provider.