Salut les gars comment allez vous?
Dans ce tutoriel, je vais vous montrer comment nous pouvons forcer les sous-titres à apparaître dans une vidéo lorsque nous l'ajoutons à notre site Web.
Et pas seulement cela, mais nous verrons également comment nous pouvons les faire apparaître par défaut dans la langue que nous voulons.
RÉSUMÉ
Si vous ne voulez pas voir toute l'explication, je vais résumer les paramètres que vous pouvez utiliser pour forcer les sous-titres automatiquement lorsque vous ajoutez une vidéo YouTube sur votre site :
- cc_load_policy=1 Pour forcer les sous-titres
- cc_lang_pref=fr Pour indiquer la langue dans laquelle les sous-titres apparaîtront, dans l'exemple en anglais
- hl = fr Langue dans laquelle l'interface du lecteur apparaîtra, dans l'exemple en anglais
Didacticiel vidéo
S'abonner à mon canal :
Et si vous pouvez passer plus de temps, voici une explication étape par étape avec de vrais exemples 🥳
Pour forcer les sous-titres sur une vidéo YouTube intégrée dans un site Web, vous devez ajouter un paramètre dans le code HTML. La le paramètre est appelé 'cc_load_policy' et peut avoir deux valeurs : '1' pour afficher les sous-titres ou '0' pour les masquer.
Par exemple, si vous souhaitez que les sous-titres s'affichent par défaut dans votre vidéo, ajoutez simplement '&cc_load_policy=1' à la fin du code HTML de la vidéo. Le code complet ressemblerait à ceci :
<iframe width="705" height="315" src="https://www.youtube.com/embed/ZFXwJ9KBxZM?cc_load_policy=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>Et le résultat sera ceci :
Traduire automatiquement les sous-titres d'une vidéo YouTube intégrée à un site Web
Non seulement vous pouvez ajouter des sous-titres, mais vous pouvez choisir dans quelle langue.
Entretien
Ils n'apparaîtront que si vous avez ajouté le sous-titre dans cette langue à la vidéo. Pour ce faire, vous devez le configurer dans la vidéo elle-même dans YouTube
El Paramètre cc_lang_pref permet de spécifier la langue des sous-titres à afficher lors du chargement de la vidéo YouTube. Cela permet aux utilisateurs de sélectionner la langue de sous-titrage préférée lors de la lecture de la vidéo. Ceci est particulièrement utile si la vidéo est disponible avec des sous-titres en plusieurs langues, car l'utilisateur peut sélectionner celui qu'il préfère sans avoir à modifier manuellement les sous-titres.
Le code qui afficherait les sous-titres anglais ressemblerait à ceci :
<iframe width="705" height="315" src="https://www.youtube.com/embed/ZFXwJ9KBxZM?cc_load_policy=1&cc_lang_pref=en" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>Et le résultat serait :
Affichez le lecteur Youtube dans la langue de votre choix sur votre site Web
Un autre aspect important est d'afficher les boutons du lecteur lui-même dans la langue que nous voulons.
Si vous regardez les vidéos ci-dessus, vous verrez qu'elles sont en espagnol. Ici, je vous montre comment le changer.
El paramètre hl YouTube est utilisé pour spécifier la langue dans laquelle le contenu du lecteur YouTube est affiché. Cela inclut le interface utilisateur, sous-titres, descriptions vidéo, balises et titress. Si aucune langue spécifique n'est spécifiée, le contenu du lecteur sera affiché dans la langue par défaut.
Le code serait quelque chose comme ça hl = fr, en remplaçant 'en' par la langue souhaitée :
<iframe width="705" height="315" src="https://www.youtube.com/embed/ZFXwJ9KBxZM?cc_load_policy=1&cc_lang_pref=en&hl=en" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>Et le résultat serait :
AVANTAGES
- Améliorer l'accessibilité du contenu pour tous les utilisateurs
- Les utilisateurs peuvent basculer entre l'affichage et le masquage des sous-titres
- Il est relativement facile à mettre en œuvre
CONS
- Cela nécessite une configuration supplémentaire mais comme vous pouvez le voir c'est très facile
J'espère que le tuto vous a été utile 😉