oEmbed

Published : 4 December 2013 – updated on 11 June 2024 – by b_b, Cerdic – 254 commentaires

français, Português do Brasil
1
2
3
4
5
51 Votes

Qu’est ce qu’oEmbed ?

oEmbed est un protocole ouvert qui permet d’insérer le contenu d’une page web dans une autre page. Le contenu inséré peut être de plusieurs types : photo, vidéo, URL ou extrait HTML.

L’échange d’information a lieu entre un site client et un site serveur. Par exemple, le site client peut afficher une représentation d’une page web telle qu’une image ou une vidéo. Le serveur doit disposer d’un service utilisant l’API oEmbed pour permettre aux clients de récupérer les informations de la représentation à afficher.

Utiliser oEmbed pour les rédacteurs

Pour ajouter un document (image, vidéo, ...) issu d’un autre site, il y a deux moyens:

  • Ajouter dans le corps du texte l’URL du document à ajouter entre les caractères <...> .
    Par exemple, <https://www.flickr.com/photos/romytetue/4651342894/>
  • Ajouter l’URL du document seul en début de ligne (entouré avant et après d’un retour à la ligne)

Si le site vers lequel pointe l’URL implémente l’API oEmbed, celle-ci est complétée par un extrait du contenu fourni par le site.

Par exemple: Si on insère l’URL suivante dans le texte d’un article :

mon article ...... <https://www.flickr.com/photos/romytetue/4651342894/> ... la suite de mon article

ou

mon article ......

https://www.flickr.com/photos/romytetue/4651342894/

... la suite de mon article

Celle-ci sera automatiquement remplacée par le contenu suivant :

L'estafette SPIP
L'estafette SPIP
by tetue
https://www.flickr.com/photos/romytetue/4651342894/

Utiliser la fonction ajouter des documents distants avec oEmbed

Le plugin insère aussi ces traitements dans le formulaire d’ajout de documents de SPIP (dans la partie documents distants). Il suffit d’ajouter un document distant dont l’URL est celle de la page où se trouve le contenu à récupérer.

Voir la vidéo ci-dessous pour une petite démonstration.

https://medias.spip.net/medias/r-d/plugins-26/multimedia/article/demo-du-plugin-oembed

Une fois le document ajouté, vous pouvez l’insérer dans le contenu de votre article comme n’importe quel document. avec le raccourci <docXX>

Pour les concepteurs-trices de squelettes, on pourra donc facilement boucler sur les documents d’un article (ou autre) grâce au champ oembed

Exemple:

<BOUCLE_oe(DOCUMENTS){id_article}{oembed!=''}>
...
</BOUCLE_oe>

Est ce que cela fonctionne avec n’importe quel site ?

Non, pour des raisons de sécurité le plugin utilise une liste blanche de sites autorisées. Par défaut, cette liste contient les sites suivants : youtube, blip.tv, vimeo, dailymotion, flickr, soundcloud, slideshare, yfrog, instagram, rdio, huffduffer, nfb, dotsub, clikthrough, kinomap, photobucket, smugmug, meetup, wordpress, blogs.cnn, techcrunch, my.opera, viddler et collegehumor (consulter la liste complète).

Pour ajouter un nouveau site serveur (ou provider) à la liste blanche il vous faudra deux informations :

  • scheme : schéma d’URL correspondant au site (vous pouvez utiliser * comme wildcard)
  • endpoint : URL à laquelle le service oEmbed du site est disponible

Par exemple, pour ajouter le site deviantART à la liste blanche il suffit d’ajouter un provider avec les paramètres suivants :

  • scheme : http://*.deviantart.com/art/*
  • endpoint : http://backend.deviantart.com/oembed

L’ajout peut se faire à l’aide du pipeline oembed_lister_providers ou en personnalisant le contenu de la variable globale $GLOBALS['oembed_providers'].

Par exemple, dans un plugin de préfixe monplugin en déclarant le pipeline suivant dans plugins/monplugin/monplugins_pipelines.php :

function monplugin_oembed_lister_providers($providers){

	$providers['http://*.deviantart.com/art/*'] = 'http://backend.deviantart.com/oembed';

	return $providers;
}

Ou sans utiliser de plugin, directement dans votre fichier config/mes_options.php :

$GLOBALS['oembed_providers'] = array(
	'http://*.deviantart.com/art/*' => 'http://backend.deviantart.com/oembed',
);

Voici une liste non exhaustive de providers supplémentaires au format JSON.

Traitements automatiques

La page de configuration vous permet aussi de paramétrer les automatismes du plugin :

  • largeur/hauteur par défaut des blocs d’embed
  • activer/désactiver la transformation automatique des URLs dans le texte : cela concerne les URLs toutes seules dans un paragraphes, car les URLs entre < et > seront toujours converties ;
  • activer/désactiver la détection automatique des providers sans tenir compte de la liste blanche (attention aux failles XSS).
  • désactiver l’insertion des entêtes qui déclarent le site comme provider

Youtube

Pour les vidéos issues de Youtube, le plugin ajoute automatiquement deux options:

  • pour ne pas lister les vidéos liées en fin de lecture
  • les vidéos sont intégrées depuis le nom de domaine youtube-nocookies.com pour ne pas déposer de cookies supplémentaires à l’internaute (respect de la vie privée).

Fonctions de post-traitement

Il est possible de déclarer des fonctions de post-traitement qui agiront sur les données renvoyées par le site source (ou provider). Le nommage de ces fonctions suit la convention suivante oembed_posttraite_{$provider_name}_$type[_dist] afin de permettre de déclarer un post-traitement en fonction de la source de données.

Par exemple, le plugin fournit une fonction de post-traitement pour soundcloud :

function oembed_input_posttraite_soundcloud_rich_dist($data){

	$data['media'] = 'sound';
	$data['html'] = preg_replace(",width=['\"][0-9]+['\"],i",'width="100%"',$data['html']);

	if (!isset($data['thumbnail_url'])){
		$data['thumbnail_url'] = find_in_path("oembed/input/vignettes/soundcloud.png");
	}

	return $data;
}

Cette fonction définit que le contenu renvoyé est du son, puis elle modifie la largeur du lecteur audio, et pour finir elle définit une vignette par défaut si celle-ci n’est pas présente.

Voir la source sur la zone.

Côté serveur

Le plugin ajoute des liens de déclaration oEmbed dans l’entête des pages du site. Ces liens permettent aux autres sites de découvrir que votre site est “compatible” oEmbed et qu’il peut donc être utilisé en tant que fournisseur de contenu (ou provider).

Les paramètres à fournir pour permettre à un autre site d’ajouter le votre à sa liste blanche de providers sont les suivants :

Pour que l’adresse du service fonctionne il faut avoir activé le fichier .htaccess fourni par défaut dans SPIP.

Le contenu renvoyé lors d’une requête oembed est généré par les squelettes situés dans le répertoire spip-contrib-extensions/oembed/oembed/output/modeles. Ces squelettes sont personnalisables, vous pouvez y insérer des boucles et balises afin de renvoyer le code d’embed d’un document audio/vidéo, une image tirée du portfolio d’un article, etc.

Par exemple, pour une requête depuis l’URL GIS 4 le contenu renvoyé est le suivant :

{
    "version": "1.0",
    "type": "rich",
    "provider_name": "SPIP-Contrib",
    "provider_url": "http://contrib.spip.net",
    "title": "GIS 4",
    "author_name": "b_b",
    "width": "480",
    "height": "295",
    "url": "[->4189]",
    "html": "<h4 class='title'><a href='http://contrib.spip.net/GIS-4'>GIS 4</a></h4><blockquote class='spip'>\n<p>Présentation et nouveautés <br class='autobr' />\nLa version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles fonctions.<br class='autobr' />\nCette nouvelle version de GIS permet d’utiliser différents fonds de carte sans avoir à charger des scripts externes, seuls les scripts locaux de Leaflet et des plugins nécessaires sont chargés dans vos pages. À ce jour, le plugin propose plus de&nbsp;(...)</p>\n</blockquote>\n"
}

Voir le code en ligne.

Et voici ce que donne l’affichage depuis le site SPIP client :

Commandes SPIP-Cli

Le plugin propose à partir de la v3.2.0, une commande spip-cli pour un chemin de migration depuis le plugin videos qui n’est plus maintenu :

  • la commande spip oembed:migrer:videos-dist permet de migrer les documents joints créés par le plugin vidéos en documents joints de type oEmbed, à condition que le media soit toujours disponible en ligne
  • le modèle <videoXX> qui était utilisé par le plugin videos est pris en charge également

Discussion

5 years 1 year 3 months Without limit
par date
Filter

71 discussions

  • 1
    Fennec72

    Bonsoir,

    Est-ce que ça peut fonctionner avec une vidéo postée sur Facebook?

    Exemple avec cette vidéo d’une antenne locale de la SPA:
    https://www.facebook.com/watch?v=2600002790191841&locale=fr_FR

    Merci d’avance,

    Cordialement,

    Hervé

    • b_b

      Salut, la doc mentionne un lien vers la liste complète des providers et on n’y trouve aucune trace de facebook, donc à ce jour non.

    Reply to this message

  • 1
    Fennec72

    Bonjour,

    Pour les vidéos issues de Youtube, le plugin ajoute automatiquement deux options :
    pour ne pas lister les vidéos liées en fin de lecture

    Qu’est-ce que cela veut dire exactement?
    Je pensais que ça bloquait l’affichage des vignettes d’autres vidéos YouTube à la fin de la lecture de la vidéo.
    Apparement pas ou alors il y a un point que j’ai manqué.

    Merci d’avance,

    Cordialement,

    Hervé

    Reply to this message

  • Morane

    Bonjour ,

    Je viens de tester ce plugin Oembed sur un site en localhost (http).
    La photo de test ne s’affiche pas, juste un lien.
    Sur un site en ligne (https) avec la meme config d’oembed ca marche bien.

    J’ai les erreurs suivantes dans oembed.log ：

    2024-07-21 11:02:11 127.0.0.1 (pid 22516) :Pri:debug: Requete oembed (curl) pour http://www.flickr.com/photos/romytetue/4651342894/ : https://www.flickr.com/services/oembed/?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fromytetue%2F4651342894%2F&maxwidth=600&maxheight=400&format=json 2024-07-21 11:02:32 127.0.0.1 (pid 22516) :Pri:ERREUR: infos oembed brutes pour http://www.flickr.com/photos/romytetue/4651342894/ | https://www.flickr.com/services/oembed/?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fromytetue%2F4651342894%2F&maxwidth=600&maxheight=400&format=json : ECHEC Status 0 Error 28 Failed to connect to www.flickr.com port 443: Timed out 2024-07-21 11:02:32 127.0.0.1 (pid 22516) :Pri:debug: infos oembed pour http://www.flickr.com/photos/romytetue/4651342894/ : ’’

    Le site client est en http , est-ce la raison ?
    Si oui, comment autoriser le fonctionnement pour un site client en simple http?

    Merci !

    Reply to this message

  • 2
    Morane

    Bonjour ,

    Je viens de tester ce plugin Oembed sur un site en localhost (http).
    La photo de test ne s’affiche pas, juste un lien.
    Sur un site en ligne (https) avec la meme config d’oembed ca marche bien.

    J’ai les erreurs suivantes dans oembed.log ：
    2024-07-21 11:02:11 127.0.0.1 (pid 22516) :Pri:debug: Requete oembed (curl) pour http://www.flickr.com/photos/romytetue/4651342894/ : https://www.flickr.com/services/oembed/?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fromytetue%2F4651342894%2F&maxwidth=600&maxheight=400&format=json 2024-07-21 11:02:32 127.0.0.1 (pid 22516) :Pri:ERREUR: infos oembed brutes pour http://www.flickr.com/photos/romytetue/4651342894/ | https://www.flickr.com/services/oembed/?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fromytetue%2F4651342894%2F&maxwidth=600&maxheight=400&format=json : ECHEC Status 0 Error 28 Failed to connect to www.flickr.com port 443: Timed out 2024-07-21 11:02:32 127.0.0.1 (pid 22516) :Pri:debug: infos oembed pour http://www.flickr.com/photos/romytetue/4651342894/ : ''
    Le site client est en http , est-ce la raison ?
    Si oui, comment autoriser le fonctionnement pour un site client en simple http?

    Merci !

    • b_b

      Salut, l’erreur Failed to connect to www.flickr.com port 443: Timed out indique que ton site en local n’arrive pas à se connecter à flickr, je viens de tester la photo en question en local de mon côté et ça fonctionne très bien.

    • Morane

      Merci b_b, ce n’est pas donc un pb de http/https .
      En fait, une iframe youtube marche, mais pas le lien direct pour oembed.
      Mon site local passe par un reseau avec un vpn (les sites tels youtube , flickr sont bloques ou je me trouve).
      C’est peut-etre ce que oembed n’aime pas.

    Reply to this message

  • 6
    Manu

    Taille des vignettes
    Quand une vidéo est affichée “plein pot” dans une mise en page grande largeur, la vignette insérée en background-image avec la propriété cover devient assez vite dégradée en terme de qualité. Sur les essais que j’ai faits, l’image qui est récupérée par Oembed fait 480x360px. Y a-t-il un moyen de choisir/contrôler la taille des vignettes afin d’avoir un visuel de qualité ?

    • Cerdic

      En 1 mot : ce n’est pas prévu par le protocole oEmbed.

      Donc éventuellement, sur certains providers, en cherchant dans leurs méandres techniques si on peut retrouver une vignette de meilleure résolution via une requete http supplémentaire, c’est peut-être faisable ?

      Il faudra alors accepter que ça prenne plus de temps, que ça casse dans le temps en fonction des changements d’api sur les providers concernés (et donc toujours être capable d’utiliser la vignette par défaut si on arrive pas à avoir une vignette de meilleure résolution).

    • Manu

      OK, compris.
      Concernant les videos YT, l’API propose des tailles de vignettes allant quasi systématiquement 640x480 et également très souvent 1280x720. Certes, c’est susceptible de changer, mais ça a l’air d’être en place de manière assez stable depuis pas mal de temps.
      https://i.ytimg.com/vi/ID_de_la_video/default(mqdefault/hqdefault/sddefault/maxresdefault).jpg
      Pour des vidéos affichées plein écran, c’est beaucoup agréable/accrocheur (ou - pour pour le dire différent - une image 480x360 étirée exagérément conduit à un résultat pénalisant).
      Je ne sais pas ce qu’il en est pour les autres providers

    • b_b

      Juste une remarque, à ce sujet, je ne pense pas que ça soit une bonne idée pour les perfs et la planète si on se met à balancer de la vignette en 1280px par défaut alors que l’image ne sera pas affichée à plus de 640px de large dans la plupart des cas...

      > un résultat pénalisant

      Pénalisant pour quoi ? Le call to action ? ^^

    • Manu

      Oui, d’accord pour la planète. 640x480 peut constituer un bon compromis, pourquoi pas.

      Quand je dis “pénalisant”, c’est côté esthétique qui va de pair avec la qualité ressentie par le visiteur. J’ai un client qui dispose d’un site qui s’intéresse à des itinéraires techniques agricoles écologiquement innovants. Le contenu est riche et technique (2500 articles, 6000 documents dont 800 vidéos) Pour le moment, j’utilise le plugin videos, ça fonctionne bien et les visuels des vidéos sont propres et sont bien en phase avec le contenu.
      Pour différentes raisons (essentiellement parce que la récupération des vignettes YT connaît parfois qqs échecs), je regarde si il seraait intéressant de changer de fusil d’épaule et utiliser oembed qui parait plus robuste, mais, là, c’est vrai que cette petite taille de vignette (et donc la qualité du visuel affiché) pénalise le ressenti que l’on a en visualisant la page. Bref, ça fait moins propre, moins “pro”. C’est ça qui est pénalisant.

    • Manu

      Je déterre ce post un peu vieux...
      Je gère le site d’un festival de rue, et je butte de nouveau sur ce même os : les vignettes retenues en background étant de petite taille (ou disons, pas grandes !), sur un grand écran, la pixellisation est vraiment visible et la vignette donne une mauvaise image (c’est le cas de le dire dans le cas de propositions artistiques) au contenu...
      Il y a une vraie différence de rendu entre hddefault et maxresdefaut proposés par youtube.
      Donc, oui, il me semble que c’est gênant de ne pas avoir une image de qualité en background...

    • cy_altern

      alors dans la mesure où tu accepte les contraintes listées par Cerdic (surtout la pérennité pas garantie !) et que tu assume l’augmentation du coût écologique de ton site noté par b_b_, voici ce qu’il est possible d’ajouter en fin du modèle oembed_video.html pour gérer cette problématique des vignettes riquiqui de YT :

      [(#REM)
	ajouts pour affichage vidéos Youtube en pleine largeur
	avec un max de 1440px
	+ remplacement de la vignette basse def de Youtube si vidéo > 1024

] #SET{largeur_video, #ENV{data/width}} [(#ENV{data/width}|intval|>{1440}|oui) #SET{largeur_video, 1440}]
[(#ENV{data/width}|intval|>{1024}|oui)
	<style type="text/css">		
		@media (min-width: 1440px) {
			.texte_article .spip_document_video {
				margin-left: calc((var(--img-large-xl) - var(--largeur-lecture)) / -2);
				margin-right: calc((var(--img-large-xl) - var(--largeur-lecture)) / -2);
				text-align: center;
			}	
			.oembed.oe-video {
				width: #GET{largeur_video}px;
			}
			[(#ENV{data/provider_url}|=={https://www.youtube.com/}|oui) 
				.rwd-video-container {
					background-image:url('[(#GET{thumbnail}|replace{hqdefault.jpg, hq720.jpg})]') !important;
				}
			]
		}
		[(#ENV{data/width}|intval|>{1280}|oui)
			@media (min-width: 1920px) {
				/* si on a des vidéos Oembed de taille > 1280px dans les articles */
				.texte_article .spip_document_video {
					margin-left: calc((var(--img-large-xxl) - var(--largeur-lecture)) / -2);
					margin-right: calc((var(--img-large-xxl) - var(--largeur-lecture)) / -2);
					text-align: center;
				}
			}
		]
	</style>	
]

      avec :
      -  les variables CSS suivantes définies quelque part dans les CSS du site :

      --img-large-xl: 1280px;
--img-large-xxl: 1440px;
--largeur-lecture: 740px;


      -  le paramétrage du plugin oEmbed avec :

      • Largeur maxi. par défaut: 1280
      • Hauteur maxi. par défaut: 720

    Reply to this message

  • 1
    Philippe

    Bonjour

    Je ne trouve pas comment utiliser oEmbed à partir d’un squelette, dans une boucle DOCUMENTS :
    Dans un article :
    https://monliendistant.html
    fonctionne très bien

    Dans un squelette, j’ai testé plusieurs déclinaisons de :
    [(#MODELE{oembed, id_document=#ID_DOCUMENT})]
    Dans une boucle DOCUMENTS, sans succès. Y compris en variant le passage de paramètres (url à la place de id), et le modèle utilisé (oembed_video pour moi).

    Je dois donc m’y prendre mal.
    Les liens distants sont stockés sous la forme de fichiers .html dans le répertoire IMG/distant :
    <iframe width="600" height="338" src="https://monliendistant.html ?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    Peut être une piste de ce côté?

    Merci

    • Philippe

      Hum... on se sent bête, des fois...
      Il fallait simplement utiliser le modèle emb :
      [(#MODELE{emb, id_document=#ENV{id_document}})]
      Désolé pour le bruit

    Reply to this message

  • 1
    conil26

    Est-il possible de supprimer les logos de l’imprimante et de téléchargement à droite.

    Merci

    Reply to this message

  • 2
    DD

    Bonjour,

    Sur un site on me demande de pouvoir ajouter des “short” videos Youtube comme documents.
    C’est sous la forme https://www.youtube.com/shorts/xzxxx
    mais cela retourne une page de type html comme document.
    A votre avis est-ce qu’il y a moyen de faire autrement qu’avec une iframe ?

    Merci
    dd

    Reply to this message

  • 4
    jeanmarie

    Salut,

    la fonction oembed_safe_thumbnail (voir ici) qui génère l’image de fond du player limite à 1200px la taille de l’image générée. Or, dans mon cas, il me faudrait plus grand.

    Y a t’il un moyen de surcharger cette taille ? Ou alors il faut surcharger la fonction ?
    Si surcharge de la fonction , comment faire ? (je n’ai pas trouvé comment surcharger un fonction “non dist”.

    Reply to this message

  • 1
    Fennec72

    Bonjour,

    Pour les vidéos YouTube est-il possible, à la fin de la vidéo de limité la suggestion de nouvelles vidéos à celle de la chaine de la vidéo insérée?

    Merci d’avance,

    Cordialement,

    Hervé

    • b_b

      Je ne crois pas, mais il faudrait fouiller dans l’API youtube pour en être certain.

    Reply to this message

Add a comment

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom