Chronique familiale




La chronique familiale pas à pas

Intégrer une vidéo dans la chronique



S'il s'agit d'une vidéo que vous avez trouvée sur le net, vous devez vous assurer qu'elle est libre de droits 1 ou que vous avez l'autorisation de l'auteur pour la diffuser.

Bien entendu, la question ne se posera pas si vous êtes l'auteur de la vidéo.

La balise <video> apparue avec le HTML5 n'est pas encore reconnue par Geneweb. En attendant, nous allons voir ci-dessous qu'il existe des solutions simples pour pallier ce manque.

 

 Vidéo Youtube


Rendez-vous sur la page web de la vidéo. Cliquez sur "PARTAGER" (sous la vidéo) :


Clic sur partager



Cliquez ensuite sur les chevrons < > :


Clic sur les chevrons



Cliquez sur le lien d'intégration qui se met en surbrillance et copiez-le :


Copie du lien




Collez-le dans le bloc-notes, vous obtenez un code qui ressemble à celui-ci :

<iframe width="560" height="315" src="https://www.youtube.com/embed/l1VyhTgF7ks"... ></iframe>


La balise <iframe> n'étant pas reconnue par GeneWeb, nous utiliserons la balise <object>2 et l'attribut data.


Il suffit ensuite de récupérer l'adresse et les dimensions 3 de la vidéo dans le code d'intégration pour les intégrer dans notre code :

<div style="width:560px; margin:auto;"> la largeur de la vidéo nous sert à la centrer dans la page

<object data="https://www.youtube.com/embed/l1VyhTgF7ks" height="315" width="560">

Mettez ici le texte alternatif4

</object>

</div>



Et le résultat :


Vidéo de vaches écossaises servant d'illustration au tutoriel


 

 Vidéo Dailymotion


Rendez-vous sur la page web de la vidéo. Cliquez sur l'icône de partage (à droite de la vidéo) :


Clic sur l'icône de partage


Cliquez sur "Vidéo intégrée" :


Clic sur "Vidéo intégrée"


Mettez le code d'intégration en surbrillance et copiez-le :


Copie du code en surbrillance



Collez-le dans le bloc-notes, récupérez l'adresse et les dimensions de la vidéo dans le code d'intégration et intégrez-les dans votre code :

<div style="width:480px; margin:auto;">

<object data="https://www.dailymotion.com/embed/video/x56p856" height="270" width="480">

Mettez ici le texte alternatif

</object>

</div>



Et le résultat :


Vidéo de musique servant d'illustration au tutoriel


 

 Vidéo stockée sur votre ordinateur


Si votre vidéo est stockée sur votre ordinateur, il vous faudra d'abord héberger celle-ci sur un site extérieur à Geneanet, avant de l'afficher sur une page de votre arbre. J'utilise pour ma part Archive-Host qui accepte tous les types de fichiers et dont vous retrouverez l'adresse sur la page Utilitaires ↗

Il vous suffira ensuite de récupérer le lien vers cette vidéo sur le site où vous l'avez hébergée et de venir coller ce lien (en rouge dans l'exemple) dans le code ci-dessous en précisant les dimensions de la vidéo :

<object data="https://ahp.li/dc73c913dc07a066c115.mp4" height="500" width="275">

Mettez ici le texte alternatif

</object>

</div>



Et voici le résultat dans les notes d'une fiche individuelle ↗
 

 Notes

 
1. Un peu de lecture : Les vidéos mises en ligne ne sont pas libres de droits ! ↗
 
2. Nous avons déjà utilisé la balise <object> pour Inclure un PDF ↗
 
3. Vous avez certainement remarqué que sur la page Youtube la vidéo s'affiche à une dimension supérieure à celle spécifiée par le code d'intégration. Vous pouvez spécifier cette dimension (supérieure) dans votre code mais en respectant impérativement le ratio largeur/hauteur. Il en va de même pour les vidéos Dailymotion.
 
4. Notez qu'on n'utilise pas ici d'attribut alt et que le texte alternatif est placé entre la balise ouvrante <object ... > et la balise fermante </object>.



───── oOo ─────


Index des pages