title: Lazy Load youtube video 1 click to load and play
body: <p>I am using this code and is working perfect to use images to lazyload YT videos:</p>
  
  <pre><code>( function() {
  
  var youtube = document.querySelectorAll( ".youtube" );
  
  for (var i = 0; i &lt; youtube.length; i++) {
  
  var source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/sddefault.jpg";
  
  var image = new Image();
      image.src = source;
      image.addEventListener( "load", function() {
        youtube[ i ].appendChild( image );
      }( i ) );
  
      youtube[i].addEventListener( "click", function() {
  
        var iframe = document.createElement( "iframe" );
  
            iframe.setAttribute( "frameborder", "0" );
            iframe.setAttribute( "allowfullscreen", "" );
            iframe.setAttribute( "src", "https://www.youtube.com/embed/"+ this.dataset.embed +"?rel=0&amp;showinfo=0&amp;autoplay=1&amp;enablejsapi=1" );
  
            this.innerHTML = "";
            this.appendChild( iframe );
      } );  
  };
  
  } )();
  </code></pre>
  
  <p>However requieres 2 clicks 1 to load the video and then 1 to play the video in order to work. Is there any way I can use this same code with just 1 click to play YouTube Videos?</p>
  
  <p>And is possible to make this to work also with Vimeo Videos?</p>
  
  <p>Thanks!</p>