Someone please look at this question and give me something; show someone is looking at my question; give me a comment or answer just something to show someone has seen my question.
Context: This is a Youtube API javascript and iframe that plays the sound of the youtube link when you hover over the link. The link is inputted into a table just so you know.
Problem: The problem is that when I hover over a link that I input into the table i.e say I put multiple links (each connected to a different sound) in the table but when I hover over each link they only play the sound of the first link in the table; The other links in the table does not play their appropriate sounds. Can someone help me modify the code below to fix this issue? Provide the modified code integrated into the Original code.Do not change the src variable;leave it as is. Please by standby to answer questions right away if I have any.
HTML (Iframe the src is customized to play that particular link):
<div class="clickme"><iframe id="existing-iframe-example" width="300" height="200" allow="autoplay" src="https://www.youtube.com/embed/{{-list[1]-}}?autoplay=1&mute=0&enablejsapi=1" frameborder="0" style="display: none"> </iframe></div>Javascript(Youtube API):
<script type="text/javascript"> var tag = document.createElement('script'); tag.id = 'iframe-demo'; tag.src = 'https://www.youtube.com/iframe_api'; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var player1; function onYouTubeIframeAPIReady() { player1 = new YT.Player('existing-iframe-example', { playerVars: { 'autoplay': 1, 'controls': 0 }, events: {'onReady': onPlayerReady,'onStateChange': onPlayerStateChange } }); } function onPlayerReady(event) { document.getElementById('existing-iframe-example').style.borderColor = '#FF6D00'; event.target.playVideo(); } function onPlayerStateChange(event) { //changeBorderColor(event.data); if (event.data == YT.PlayerState.ENDED) { //var myFetchedNextVideoId = document.getElementById('clickme'); player1.seekTo(0); player1.playVideo(); //player1.loadVideoById(myFetchedNextVideoId); } //if (event.data == YT.PlayerState.ENDED && !done) { // player.loadVideoById(myFetchedNextVideoId); //} } // Shorthand for $( document ).ready() // A $( document ).ready() block. $(document).ready(function () { console.log("ready!"); var menu = document.getElementsByClassName("clickme"); for (i = 0; i < menu.length; i++) { var list = menu[i]; var link = String(list.outerHTML) if (link.includes('youtube')) { list.addEventListener("mouseenter", function (event) { console.log('mouse enter '); player1.playVideo(); }); list.addEventListener("mouseleave", function (event) { console.log('mouse out '); player1.pauseVideo(); }); } } });</script>