title: The data-video attribute I am trying to change with new video id but it is not changing
body: <p>The I trying to change video id <code>8IYzyTYucKQ</code> to <code>WKV_z36pVAk</code> dynamically but it is not changing.</p>
  
  <p>I think the library bellow only work on page reload so when I clicked the button the new Id changes but the video play the older Id, when I reload the video again Id reset to default one.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
      &lt;html&gt; 
      &lt;head&gt; 
      &lt;meta charset="utf-8" /&gt; 
      &lt;title&gt;About&lt;/title&gt;
           &lt;script type="text/javascript"&gt;
            function val1(val)
            {
          location.reload();
          document.getElementsByTagName("div")[0].setAttribute("data-video", val);
              //document.getElementById("youtube-audio").data-video=val;
              //document.getElementById("p1").innerHTML=val;
              alert(val);
  
  
            }
  
           &lt;/script&gt;
      &lt;/head&gt; 
      &lt;body&gt; 
      &lt;h3 style="color:#0066dd"&gt;Hello&lt;/h3&gt;
  
      &lt;center&gt;
  
  
      &lt;div data-video="8IYzyTYucKQ"
           data-autoplay="0"
           data-loop="1"
           id="youtube-audio"&gt;
      &lt;/div&gt; 
  
      &lt;/center&gt;
      &lt;button onclick="val1('WKV_z36pVAk')"&gt;change&lt;/button&gt;
  
  
      &lt;/body&gt; 
      &lt;script src="https://www.youtube.com/iframe_api"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.rawgit.com/labnol/files/master/yt.js"&gt;&lt;/script&gt;
      &lt;/html&gt;
  </code></pre>