The YouTube videos are embedded in the SVG code using the foreignObject element with an iframe. The problem is that the video keeps playing when another is selected to play. I would like for the current video playing to stop when another starts to play. I would be better so the user of the site does not have to go back and forth to stop playing videos that they previously played. I have tried the stopVideo and pauseVideo functions but they don't seem to work.
THIS IS THE CURRENT FUNCTION BEING USED TO HIDE THE VIDEO PLAYER WHEN ANOTHER LINK(TAG) IS CLICKED TO OPEN UP ANOTHER YOUTUBE VIDEO, ALLOWING THE USER TO WATCH THE VIDEO AND HIDE THE PREVIOUS ONE. I WOULD LIKE FOR THE PREVIOUS VIDEO TO STOP PLAYING WHEN THIS EVENT HAPPENS.
<script type="text/javascript"><![CDATA[ var id = 'name';function place(id) { var gs = document.getElementsByClassName("textboxes"); // Hide all the elements for (var i = 0; i < gs.length; i++) { gs[i].classList.add("hidden"); } // But make sure the one with "id" is visible document.getElementById(id).classList.remove("hidden");} ]]></script><script> function reset() { document.getElementById("introinfo").classList.remove("hidden"); document.getElementById("textboxes").classList.add("hidden");}</script>THIS IS HOW THE YOUTUBE VIDEOS ARE EMBEDDED IN THE SVG CODE
<g id="introinfo" class="textboxes"><rect id="info-box" x="1676.49" y="35.62" class="st611" width="1292.93" height="715"/><foreignobject x="1676" y="35" width="1292" height="715"><div style="margin-bottom: 0px; padding-bottom: 0px;"><iframe class="youtube-video" width="1292" height="575" xmlns="http://www.w3.org/1999/xhtml" src="https://www.youtube.com/embed/********wmode=opaque&enablejsapi=1&version=3" allowscriptaccess="always" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div></foreignobject></g>