Comment insérer une vidéo sur votre site ou votre blog ?

Les vidéos de ce site peuvent être affichées facilement sur votre site ou votre blog.

Fonctionnalité oEmbed

Cette fonctionnalité est disponible depuis avril 2015.

La WebTV académique et la ScolaWebTV sont désormais compatibles oembed (et vous permettent d’embarquer plus facilement des vidéos dans votre site s’il est compatible oEmbed) [1].

Cela signifie que pour afficher une vidéo dans un article de votre site, il vous suffira de coller l’url de la page dans un champs texte (sur une ligne isolée). Et ceci pour des vidéos de nos Webtv ou autre fournisseur oEmbed dont : Dailymotion, youtube, vimeo, etc...

C’est quasiment pareil que de copier/coller le code iframe fourni (cf ci-dessous), mais plus simple quand même et avec d’autres avantages : l’affichage des vidéos est « responsive » (pas dépendant de dimensions). La pérennité est meilleure aussi.

Tout ceci est possible (serveur et client) grâce au format 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 (source wikipedia).
oEmbed permet d’afficher ailleurs plein de médias et des contenus riches, pas seulement des vidéos.

Fonctionnalité « code embed iframe »

Pour chacune des vidéos, vous trouverez un lecteur exportable sous la forme de code html.

Comment utiliser ce code ?

  • Choisir la largeur de la vidéo
  • Copier le code du lecteur exportable (affiché sur la page de la vidéo)
  • Si votre site est « fait main », coller le code à l’endroit souhaité
  • Si vous utilisez un gestionnaire de contenu :
    • Avec spip, coller le code dans le texte de votre article (entre les balises <html> et </html>). Exemple dans ce site :
    • Dans un blog, coller le code dans le code source du billet à l’endroit souhaité
    • Si votre blog est motorisé par Dotclear, utilisez de préférence le mode de rédaction « wiki » et coller le code entre ///html et ///.

Vous pouvez éventuellement, en fonction de la largeur de votre site, adapter les dimensions hauteur et la largeur de la vidéo. Pour cela :

  • choisir une largeur pour le paramètre « largeur ». Ajouter 10 pour le paramètre « width ».
  • calculer la hauteur : « hauteur » doit être » 9/16e de la valeur « largeur ». Ajouter 20 pour « height ».

Les liens contenus dans l’iframe sous la vidéo ne doivent pas être masqués sauf si vous citez clairement l’origine de la page sur votre site « webtv.ac-versailles.fr » (avec un lien) et l’auteur.

Notes

[1Si vous voulez que que votre site SPIP soit compatible oembed il suffit d’installer le plugin SPIP oembed (et de cocher l’option pour ignorer la liste blanche car nos webtv n’y sont pas par défaut).