title: JS function: Cannot read property 'dataset' of undefined
body: <p>I have a JS function that replaces a parent Node with a Youtube iFrame:</p>
  
  <pre><code>function labnolIframe() {
      var iframe = document.createElement("iframe");
      iframe.setAttribute("src", "//www.youtube.com/embed/" + this.parentNode.dataset.id + "?autoplay=1&amp;autohide=2&amp;border=0&amp;wmode=opaque&amp;enablejsapi=1&amp;controls=1&amp;showinfo=0");
      iframe.setAttribute("frameborder", "0");
      iframe.setAttribute("id", "youtube-iframe");
      iframe.setAttribute("width", "100%");
      iframe.setAttribute("allowFullscreen", "1");
      this.parentNode.replaceChild(iframe, this);
  }
  </code></pre>
  
  <p>I dynamically create divs on page load that have an onclick attribute that runs the above function:</p>
  
  <pre><code>(function() {
      var v = document.getElementsByClassName("youtube-player");
      for (var n = 0; n &lt; v.length; n++) {
          var p = document.createElement("div");
          p.innerHTML = labnolThumb(v[n].dataset.id);
          p.onclick = labnolIframe;
          v[n].appendChild(p);
      }
  })();
  </code></pre>
  
  <p>So far, so good. But I am trying to add an additional icon that calls the function labnolIframe and having difficulty:</p>
  
  <pre><code>$('.play-icon').click(function(){
     labnolIframe();
  });
  </code></pre>
  
  <p>When I click on .play-icon, I want to run the code that replaces the parent div with the youtube Iframe. But I've discovered that "this" in the above function is not referring to the "this" element in the DOM (unlike when I call it in the first example).</p>
  
  <p>How can I change my code so that it refers to "this" in the last example?</p>