The problem I am having is that when I play a youtube link on hover in a table, all the youtube links play only the first sound on hover but none of them play the appropiate sound for their link. So can you modify the current code I have to do that? Provide the site where tested out the modified code.
Javascript(Youtube API plays youtube sound on hover):
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) { player1.seekTo(0); player1.playVideo(); }}// 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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><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>