Improve YouTube thumbnail quality?

I had a similar issue and came up with this solution:

• make an image that contains the high res thumbnail (from url)
• make an iframe underneath (using z-index) with desired resolution
• align both of these using position:absolute

• surround both by link that will make image disappear on hover

  .video-box{
      height:220px;
      width:391px;
      position:relative;
  }
  
  .video-thumbnail{
      z-index:300;
      position:absolute;
      top:0;
      left:0;
      width:100%;
  }
  
  .video-frame{
      z-index:100;
      position:absolute;
      top:0;
      left:0;
      width:100%;
  }
  
  .thumbnail-link .video-thumbnail{
      display:block;
  }
  
  .thumbnail-link:hover .video-thumbnail{
      display:none;
  }
  

On hover the lower quality thumbnail will show, however the youtube play button will be more prominent. Also, it will appear to look like the background is sort of being blurred.

Let me know your thoughts.

example: http://jsfiddle.net/d9D9E/1/