Dernièrement le projet Joomla a diffusé une vidéo de promotion du CMS au niveau mondial. En intégrant des sous-titres, ils voulaient permettre aux différentes communautés de profiter de cette vidéo pour en faire une promotion locale. Le hic c’est qu’il n’est pas possible de faire un lien forçant les langues de sous-titre. Voici donc comment insérer une vidéo sur votre site en forçant la langue des sous-titres

Comment insérer une vidéo Youtube sur votre site sous-titrée dans votre langue ?

Vous allez voir, c’est tout simple. Il suffit d’ajouter quelques bout de code à l’URL de la vidéo et d’insérer la vidéo en iframe sur votre site. En 5 minutes chrono la vidéo sera sur votre site !

Pour cet exemple nous allons travailler sur la vidéo “What is Joomla!” diffusée le 9 mars 2019 sur la chaîne officielle

Comme vous pouvez le constater la vidéo est bien sous-titrée mais les sous-titres sont ceux par défaut donc en anglais. Connaissant l’intérêt des français pour les langues étrangères nous allons mettre les sous-titres en français. 😃

Vous êtes prêts ? Alors allons-y. Je fais un pas à pas pour ceux qui ne l’ont jamais fait, pour les autres vous pouvez récupérer le code directement en bas de cet article.

Récupérez le code de la vidéo sur Youtube

Première étape, vous allez sur la page Youtube et vous cliquez sur le lien “Partager”

Deuxième étape, vous choisissez l’option “Intégrer”

Troisième et dernière étape, vous récupérez le code

Intégrez ce code sur votre site

Vous allez voir c’est très simple. Ajoutez &hl=en&cc_lang_pref=fr” avant “&cc_load_policy=1” dans le code d’hébergement de la vidéo.

• “hl” definit la langue à l’intérieur de la vidéo
• “cc_lang_pref” définit la langue choisie pour la lecture de la vidéo

Si l’on prend l’exemple d’un affichage de sous-titres en français, le code est = fr , le code iframe à intégrer est alors le suivant :

<div class="yt-embed" data-video-id="agMGyThdulE" role="button" tabindex="0" aria-label="Lire la vidéo : YouTube video"><img src="https://i.ytimg.com/vi/agMGyThdulE/hqdefault.jpg" alt="YouTube video" loading="lazy" class="yt-embed__thumb" /><div class="yt-embed__play" aria-hidden="true"><svg viewBox="0 0 68 48" width="68" height="48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55C3.97 2.33 2.27 4.81 1.48 7.74.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24L27 14v20" fill="white"/></svg></div></div>

Et le résultat, TADAAAA ! 😄

Vous préférez avec les sous-titres en roumain, pas de soucis, remplacez le “fr” par “ro” et hop en deux secondes c’est fait !

Amusez-vous bien et diffusez ! 😎