Someone please help or ask me something; show someone looked at my question.Context: This is a Youtube API that initializes player for each youtube link so the correct can play for each link when you hover over it. The links are put in a table just so you know.
Problem: The problem is that when I hover over on and off a link it gives errors such as "Uncaught TypeError: player1.playVideo is not a function" for mouseenter and "Uncaught TypeError: player1.playVideo is not a function" for mouseleave from the javascript component. Therefore, the sound won't play. Can someone help me modify my code to where the issue is resolved? Please provide the new code integrated into the old one; Do not change the src variable(leave as is). If I have questions please be on standby and answer them right away.
HTML(Iframe Code):
<div class="clickme"><iframe class="videoPlayer" data-youtube-id={{-list[1]-}} 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 createVideoElement(videoContainer) { const videoID = $(videoContainer).data('youtube-id'); /*new YT.Player($(videoContainer).attr('id'), {*/ player1=new YT.Player($(videoContainer).attr('data-youtube-id'), { videoId: videoID, playerVars: { 'autoplay': 1, 'controls': 0 }, events: {'onReady': onPlayerReady,'onStateChange': onPlayerStateChange } }); } function onPlayerReady(event) { document.getElementById('data-youtube-id').style.borderColor = '#FF6D00'; event.target.playVideo(); } window.onYouTubeIframeAPIReady = function () { $('.videoPlayer').each(function (index, videoContainer) { createVideoElement(videoContainer); }); } 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) { //var target = event.target; //$(".sound").get(0).pauseVideo(); //$(this).find(".sound").get(0).playVideo(); console.log('mouse enter '); player1.playVideo(); }); list.addEventListener("mouseleave", function (event) { //var target = event.target; //$(".sound").get(0).pauseVideo(); //$(this).find(".sound").get(0).playVideo(); console.log('mouse out '); player1.pauseVideo(); }); } } });</script>