I want to add two YouTube videos in HTML with two different language and want to give the user to select the language as of all content will be same

As I want to serve a website in a different country my website content is in English. Still, I want to allow the user to select the video in their own language. I have recorded content in 4 other languages, which may reward more engagement as my website is of Educational site.

Thank you for your Support

Solution

  Below code can be used to create a button-like structure and can easily use on your website to give the Video in two different languages.

When the above button is clicked it will change your Video without loading a page.

<section class="p-3">
                      <div class="conatiner d-flex justify-content-center align-items-center ">
                       <br>
                       <button  onclick="hin()"  id="hindi" type="button" class="btn btn-danger"> 
                        HINDI
                    </button>
                    <button  onclick="nep()"  id="Nepali" type="button" class="btn btn-danger"> 
                    NEPALI
                       </a>
                    </div>
                            <div class="conatiner d-flex justify-content-center align-items-center ">
                                <iframe  id="ytVideo" rel="0" width="560" height="315" src="https://www.youtube-nocookie.com/embed/jXxub1w5kuI?modestbranding=1&rel=0"
                                    title="YouTube video player" frameborder="0"
                                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; "
                                    allowfullscreen="1" modestbranding=1 ></iframe>
                            </div>
                
                </section>




        

    <script type="text/javascript" >
    
    document.getElementById("hindi").style.visibility = 'visible';
    document.getElementById("Nepali").style.visibility = 'hidden';
            document.getElementById("hindi").onclick = function(){
                document.getElementById("hindi").style.visibility = 'hidden';
    document.getElementById("Nepali").style.visibility = 'visible';
                document.getElementById('ytVideo').src = "https://www.youtube-nocookie.com/embed/jXxub1w5kuI?modestbranding=1&rel=0";
            }
    
        document.getElementById("Nepali").onclick = function() {
            document.getElementById('ytVideo').src = "https://www.youtube-nocookie.com/embed/azlJH5VghVo?modestbranding=1&rel=0";
            document.getElementById("hindi").style.visibility = 'visible';
             document.getElementById("Nepali").style.visibility = 'hidden';
        } 
            </script>