Comment intégrer une vidéo YouTube dans un fichiers d’aide CHM ou une documentation HTML

Les vidéos YouYube sont extrêmement pratiques pour partager facilement un contenu animé tel qu’un guide étape par étape ou une vidéo de présentation. Cela vaut le coup d’envisager ajouter une vidéo YouTube aux documentations basées sur du HTML, comme les fichiers d’aide CHM, pour décrire une procédure et la rendre plus facilement et rapidement compréhensible par l’utilisateur final. Avec un bonus, le fichiers vidéo ne sera pas inclus dans la documentation finale mais téléchargée directement depuis YouTube, réduisant ainsi la taille de la documentation. Voyons à quel point il est rapide et facile d’ajouter une vidéo YouTube à un fichier d’aide CHM ou une documentation HTML à l’aide de HelpNDoc.

Obtenez votre code d’inclusion YouTube

YouTube propose un moyen simple d’obtenir le code HTML requis pour inclure la vidéo dans votre documentation. Les étapes suivantes expliquent comment obtenir ce code.

Premièrement, trouvez la vidéo sur le site web YouTube. Comme exemple, nous allons utiliser l’une des vidéos de HelpNDoc: Aimze-vous écrire de la documentation ? Puis suivez ces étapes simples:

1. Cliquez sur le bouton Partager au bas de la vidéo: le panneau de partage avec un lien vers la vidéo apparait
2. Dans ce panneau, cliquez sur le bouton Intégrer: un autre panneau s’ouvre en dessous avec le code HTML que nous voulons
3. Copiez le contenu de ce panneau. C’est le code HTML complet requis pour intégrer la vidéo YouTube dans la documentation finale

Note: Le code d’inclusion YouTube récent n’inclue pas le protocole “http:” devant l’URL YouTube (surligné en jaune dans la capture d’écran ci-dessus). Ainsi la vidéo YouTube ne sera pas affichée lorsque votre documentation est visualisée localement sur votre ordinateur. Cela n’affectera pas la visualisation de la vidéo lorsque votre documentation est vue depuis un serveur HTTP. Pour éviter cette situation, ajoutez simplement le protocole “http:” dans le code d’inclusion YouTube.

Intégrer la code HTML en utilisant HelpNDoc

Même si HelpNDoc fournit un moyen simple et haut niveau de produire des fichiers d’aide CHM et documentations HTML, il accepte aussi le code bas niveau HTML qui sera généré tel quel dans la documentation finale.

Lancez HelpNDoc et créez ou éditez un projet, puis sélectionnez le chapitre qui affichera la vidéo YouTube choisie. L’insertion du code HTML que nous avons obtenu de YouTube est très simple:

1. Sélectionnez l’onglet Insérer en haut de la fenêtre principale de HelpNDoc en cliquant dessus
2. Cliquez sur Insérer du code HTML puis Insérer un autre code HTML dans le groupe éléments de la bibliothèque
3. Une nouvelle fenêtre apparait: choisissez un nom, collez le code HTML et validez

Et voilà! HelpNDoc afficher maintenant un encart indiquant la position de la vidéo YouTube dans le code HTML qui sera généré. Il se chargera du reste: produire une documentation contenant la vidéo YouTube que vous avez ajouté.

Aller un peu plus loin

HelpNDoc contient de nombreuses petites merveilles pour vous aider à produire les documentations les plus époustouflantes aussi facilement et rapidement que possible. Voyons voire…

Il est intéressant de mentionner que HelpNDoc a aussi créé un élément dans la bibliothèque qui peut être vu dans la panneau Bibliothèque, à droite dans la fenêtre principale de HelpNDoc. Cet élément est nommé tel que spécifié ci-dessus et peut être déposé dans d’autres chapitres: chacun d’entre eux affichera la vidéo YouTube que vous avez ajouté.
Si un jour la vidéo YouTube doit être changée, inutile de parcourir tous les chapitres pour rechercher et modifier le code HTML: éditez simplement cet élément dans la bialibothèque, collez le nouveau code HTML et la modification sera appliquée à chaque chapitre le contenant.

Voir aussi...