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

Can't play unique youtube songs on hover in a table

$
0
0

The problem I am having is that when I play a youtube link on hover in a table, all the youtube links play only the first sound on hover but none of them play the appropiate sound for their link. So can you modify the current code I have to do that? Provide the site where tested out the modified code.

Javascript(Youtube API plays youtube sound on hover):

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) {    player1.seekTo(0);    player1.playVideo();  }}// 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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script><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> 

Viewing all articles
Browse latest Browse all 3722

Latest Images

Trending Articles



Latest Images

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