YouTube thumbnail is blurry when using cueVideo

Question

When I try to load a video from JS, the thumbnail shows up as blurry for some reason. But when I just paste in the iframe embed code the thumbnail renders fine.

Example:
http://codepen.io/anon/pen/wBvVZG

Screenshot:

It looks like the youtube js api is loading in the default.jpg screenshot, while embedding an iframe loads in sddefault.jpg

The video being rendered is the HTML5 video. Tested on Chrome, Firefox, Safari on OSX 10.10 on MBP (Retina)

P.S. Yes, I need to load in the first video in JS, I can't do it in the HTML as the video ID's are being fetched from somewhere else.

Answer 1

I changed the code to this which seems to load the sddefault thumbnail (in fact, it would load any other thumbnail depending on player size):

var video;

function onYouTubePlayerAPIReady() {
  video = new YT.Player('video', {
    videoId: '1nBwfZZvjKo' // From the manual: the YouTube video ID that
                           // identifies the video that the player will load.
  });
}

Updated Pen and another pen with larger player