Quantcast
Channel: Active questions tagged youtube-api - Stack Overflow
Viewing all articles
Browse latest Browse all 3831

Playing the appropriate sound when hovering over a link

$
0
0

Context: This is a Youtube API javascript and iframe that plays the sound of the youtube link when you hover over the link. The link is inputted into a table just so you know.

Problem: The problem is that when I hover over a link that I input into the table i.e say I put multiple links (each connected to a different sound) in the table but when I hover over each link they only play the sound of the first link in the table; The other links in the table does not play their appropriate sounds. Can someone help me modify the code below to fix this issue?

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>

Viewing all articles
Browse latest Browse all 3831

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>