I am trying to display youtube audio without video with the below code so I am changing the video id but it is playing the same id again and again.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>About</title>
<script type="text/javascript">
function val1(val)
{
document.getElementsByTagName("div")[0].setAttribute("data-video", val);
alert(val);
}
</script>
</head>
<body onload="val1('WKV_z36pVAk')">
<h3 style="color:#0066dd">Hello</h3>
<center>
<div data-video="8IYzyTYucKQ"
data-autoplay="0"
data-loop="1"
id="youtube-audio">
</div>
</center>
<button>change</button>
</body>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="https://cdn.rawgit.com/labnol/files/master/yt.js"></script>
</html>
Not quite sure what you are trying to create, but this might head you into the right direction.
You can reload the specific element in a kind of hacky way using this code
function reload(vidId){ <-- Added a parameter
var container = document.getElementById("youtube-audio");
container.setAttribute("data-video", vidId); <-- Added line to change data-video
var content = container.innerHTML;
container.innerHTML= content;
}
And then add this to your HTML
<button onclick="reload('8IYzyTYucKQ')">Reload</button> <-- Added the parameter to what the `data-video` should be changed
来源：https://stackoverflow.com/questions/45571141/dynamically-change-the-video-id-on-youtube