Intégrer un média interne

L'article Insérer des images dans un billet nous a appris à insérer les images contenues dans la médiathèque. En utilisant la même technique, on peut facilement insérer des fichiers audio ou vidéo contenus dans cette même médiathèque. Pour plus de détails sur son fonctionnement, aller sur l'article Médiathèque en détail.

Si vous insérez un fichier audio en utilisant l'icône Sélecteur de média   Selecteur_de_media.PNG  , vous obtiendrez un petit lecteur de cette forme:

 

 

Si vous intégrez une vidéo de la même manière, vous obtiendrez un lien vers la vidéo. Pour les billets en mode wiki, vous obtiendrez la vidéo dans un lecteur.

Test_video.mp4

Vous pouvez aussi afficher une vidéo en la mettant en annexe à votre billet (cf. ci-dessous).

Les formats vidéo les plus courants sont acceptés dans la médiathèque. Pour un affichage de la vidéo dans la page, préférez néanmoins le format mp4 ou ogv.

Voir la page dédiée à l'affichage des vidéos.

Intégrer un média externe compatible oEmbed

La plupart des sites d'hébergement de vidéo comme la Scolawebtv, Dailymotion, Youtube ou encore Vimeo sont compatibles oEmbed.

Il vous suffit donc d'aller sur la page contenant votre vidéo et de copier l'adresse (URL) de cette page. Retournez ensuite sur la page d'édition de votre billet et cliquez à l'endroit où vous souhaitez insérer votre média. Cliquez enfin sur l'icône la plus à droite des outils: Sélecteur de médias externes (compatibles oEmbed). oEmbed.PNG Votre vidéo apparait. Enregistrez les modifications sur votre billet.

Intégrer un média à l'aide des iframes

Certains médias externes comme Madmagz, Edupad de l'Académie de Versailles ou encore Padlet ne sont pas compatibles oEmbed. Vous pouvez cependant intégrer ce type de média à l'aide du code source et des balises "iframe". En effet, tous les sites précédemment cités ainsi que de nombreux autres proposent une option nommée "Intégrer dans votre blog" ou "Partager et intégrer". Il s'agit d'un code commençant par "<iframe".

Repérez cette option sur le site source et copiez le code complet. Retournez ensuite sur votre billet, et cliquez sur l'icône Sourcesource.PNG   Votre billet s'affiche maintenant en faisant apparaitre le code source d'effets comme le saut de ligne, le gras, l'italique etc... Malgré cette "pollution visuelle", votre texte est toujours bien visible. Cliquez à l'endroit ou vous souhaitez insérer votre média et collez l'iframe. Enregistrez vos modifications et visualisez.

Si le média apparait trop petit ou trop grand, vous pouvez retourner sur le code de la page et chercher l'iframe que vous venez d'insérer. A l'intérieur de cette balise se trouve une autre balise qui détermine la taille d'affichage de votre média. Elle se nomme "width="X00"". Modifiez le nombre entre guillemets. La valeur idéale pour l'affichage sur le blog étant 600. Enregistrez à nouveau. Dans certains cas, l'image sera déformée. Il faudra alors rechercher la balise contrôlant la hauteur nommée:  "height="X00"" et lui donner une valeur proportionnelle à la largeur choisie.