3

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>
Daniel Beck
  • 20,653
  • 5
  • 38
  • 53
VyTcdc
  • 986
  • 10
  • 32
  • 1
    Where did you see that you should set `data-video` to change the currently playing video? You should be making an API call, for example: [loadVideoById](https://developers.google.com/youtube/iframe_api_reference#loadVideoById) – Ruan Mendes Aug 08 '17 at 14:58
  • be careful when changing data attributes after dom:loaded ; it gets confusing fast. https://stackoverflow.com/questions/17762906/cant-update-data-attribute-value – Timothy Groote Aug 08 '17 at 14:58
  • please run this program and check. you will understand the problem, the program has to youtube video ids, I want to change another id, but it is not changing. – VyTcdc Aug 08 '17 at 15:02
  • Can you edit the question so that it's a runnable Javascript/HTML/CSS snippet so we can run it? – clabe45 Aug 08 '17 at 22:39

1 Answers1

1

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
Bas Pauw
  • 262
  • 1
  • 12
  • Hi where to pass the new video id pls – VyTcdc Aug 08 '17 at 15:00
  • Sorry, I got off from work. Made some changes, the reload function now takes a parameter. This parameter will be the `data-video` that is being loaded. Hope it still helps you! – Bas Pauw Aug 08 '17 at 20:56