Context: This is a Youtube API javascript and iframe that plays the sound of individual youtube links when you hover over the link.
Problem: The problem is that I need to initialize a player for each of the youtube videos. I am given pieces of how to do it but I don't know how to integrate all the them and make it resonate with the iframe. Can someone help me modify the code below to fix this issue? Provide the modified code below. Make sure to leave the src variable in the iframe as is; don't change it.
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>Javascript Code to integrate into API(This code is suppose to generate players for each youtube link):
function createVideoElement(videoContainer) { const videoID = $(videoContainer).data('youtube-id'); new YT.Player($(videoContainer).attr('id'), { videoId: videoID, playerVars: { 'autoplay': 1, 'controls': 0 }, events: {'onReady': onPlayerReady,'onStateChange': onPlayerStateChange } });}window.onYouTubeIframeAPIReady = function () { $('.videoPlayer').each(function(index, videoContainer) { createVideoElement(videoContainer); });}