YouTube embedded video using IFrame API can't play a perfect loop and re-buffers the video with each loop
<p>I'm trying to make a video that autoplays and witha perfect as I use it as a background for my landing page.</p>

<p>I can achieve perfect looping with HTML5 <code>&lt;video&gt;</code> tag as it caches the video upon download.</p>

<p>I don't want to host the video on my server, so I switched to embedding using <a href="https://developers.google.com/youtube/iframe_api_reference" rel="nofollow">YouTube IFrame API</a>, I got everything to work correctly except that YT does not cache the video so there is a few seconds lag with every loop.</p>

<p>Is there any way to achieve a perfect loop playback using YouTube API without refresh?</p>

<p>Here's my code
<a href="http://codepen.io/anon/pen/LkwmJk?editors=0010" rel="nofollow">Codepen</a>
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="js-video"&gt;&lt;/div&gt;
&lt;script&gt;
  // Load the IFrame Player API code asynchronously.
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/player_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // Replace the 'ytplayer' element with an &lt;iframe&gt; and
  // YouTube player after the API code downloads.
  var player;
  function onYouTubePlayerAPIReady() {
    player = new YT.Player('js-video', {
      height: '315',
      width: '560',
      videoId: 'CFgqg5B924U',
      playerVars: { 
        'rel': 0, 
        'showinfo': 0, 
        'autoplay': 1, 'loop': 1, 
        'controls': 0, 
        'playlist': 'CFgqg5B924U' 
      },
      events: {
        'onReady': onPlayerReady
      }

    });
  }
  function onPlayerReady(event) {
    event.target.playVideo();
  }

&lt;/script&gt;</code></pre>
</div>
</div>
</p>