Pour insérer, à partir de Gutenberg, une vidéo dans une page ou un article, vous aurez 3 solutions :

Nous recommandons d'utiliser si possible le bloc "Html".

Avec cette solution, le fichier vidéo est hébergé sur un serveur spécifique permettant le streaming et non sur le serveur hébergeant AcadCMS.

Vous avez la possibilité d'utiliser le nouveau service d'hébergement vidéo PeerTube national. Toutes les informations concernant ce service sont disponibles à l'adresse : https://dane.web.ac-grenoble.fr/actualites-locales/hebergement-de-videos

Bloc "Vidéo"

Après avoir sélectionné le bloc "Vidéo", 3 possibilités s'offrent à vous pour insérer votre vidéo :

  • Transférer : pour transférer une vidéo de votre poste de travail sur le site.
  • Bibliothèque : pour utiliser une vidéo déjà présente sur le site dans la bibliothèque des médias.
  • Insérer depuis une URL : A utiliser si le serveur hébergeant votre vidéo vous fournit une URL

Différents réglages seront disponibles dans la zone de paramétrage du bloc "Vidéo" dans la partie droite de Gutenberg.

Bloc "Html"

Pour insérer votre vidéo, il vous suffira de coller le code "iframe" fournit par le serveur hébergeant votre vidéo.

Dans l'exemple ci-contre, il s'agit d'un exemple de code fournit par le service d'hébergement vidéo de l'académie de Lyon.

Iframe "responsive"

Pour que l'affichage de votre iframe soit "responsive", vous pouvez utiliser l'astuce décrite à l'adresse https://bulma.io/documentation/elements/image/#arbitrary-ratios-with-any-element

Pour mettre en oeuvre cette astuce, le code initial de votre iframe, par exemple :

sera modifié en :

Bien entendu, la classe is-16by9 est à modifier en fonction du ratio du contenu de votre iframe.

Les différentes classes disponibles sont consultables à l'adresse https://bulma.io/documentation/elements/image/#responsive-images-with-ratios

Bloc "Contenu embarqué"

Après avoir sélectionné le bloc correspondant à votre hébergeur vidéo, vous pourrez coller l'url qu'il vous aura fournie pour partager votre vidéo.