Context: This is a Youtube API javascript and iframe that plays the sound of the youtube link when you hover over the link.
Problem: The problem is that I need to initialize a player for each of your video I input into a table so I can play appropriate sound for each video. Can someone help me modify the code below to fix this issue? Provide the modify code integrated into the code I gave in the problem. Make sure the modified code works with the current src in the iframe; do not change src link in iframe.
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>