Hi guys, how are you?
In this tutorial I am going to show you how we can force the subtitles to appear in a video when we add it to our website.
And not only that, but we will also see how we can make them appear by default in the language we want.
ABSTRACT
If you do not want to see the whole explanation, I will summarize the parameters that you can use to force the subtitles automatically when you add a YouTube video to your website:
- cc_load_policy=1 To force subtitles on
- cc_lang_pref=en To indicate the language that the subtitles will appear, in the example in English
- hl = en Language in which the player interface will appear, in the example in English
Video Tutorial
Subscribe to my channel:
And if you can spend more time here is a step by step explanation with real examples 🥳
To force subtitles on a YouTube video embedded in a website, you need to add a parameter in the HTML code. The parameter is called 'cc_load_policy' and can have two values: '1' to show subtitles or '0' to hide them.
For example, if you want subtitles to be displayed by default in your video, simply add '&cc_load_policy=1' to the end of the video's HTML code. The complete code would look like this:
<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>And the result will be this:
Automatically translate subtitles in a YouTube video embedded in a web
Not only can you add subtitles, but you can choose in which language.
Care
They will only appear if you have added the subtitle in that language to the video. To do this you have to configure it in the video itself within YouTube
El cc_lang_pref parameter used to specify the language of the subtitles to be displayed when loading the YouTube video. This allows users to select the preferred subtitle language when the video is played. This is especially useful if the video is available with subtitles in multiple languages, as the user can select the preferred one without having to manually change the subtitles.
The code that would display the English subtitles would look like this:
<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>And the result would be:
Show the Youtube Player in the language you want on your website
Another important aspect is to show the buttons of the player itself in the language that we want.
If you look at the videos above you will see that they are in Spanish. Here I show you how to change it.
El hl parameter YouTube is used to specify the language in which the content of the YouTube player is displayed. This includes the user interface, subtitles, video descriptions, tags and titless. If no specific language is specified, the player content will be displayed in the default language.
The code would be something like this hl = en, changing 'en' to the language we want:
<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>And the result would be:
PROS
- Improve content accessibility for all users
- Users can toggle between showing and hiding subtitles
- It is relatively easy to implement
CONS
- It requires additional configuration but as you can see it is very easy
I hope the tutorial was useful to you 😉