Update: you can now download the jQuery plugin for embedding YouTube videos with high quality thumbnail here.
Have you come across this problem? You want to embed a YouTube video to your website. The video itself is HD. However, once you embed it, its thumbnail becomes low-res and blurry, like the YouTube video below.
In the portfolio section of one of my template Jordan, I solved this problem by first retrieving the YouTube video’s high-res thumbnail and then adding a click event handler to the high-res thumbnail to trigger the video’s playback. Let me explain this in more details.
Retrieving Hi-Resolution Thumbnail
If the YouTube video is HD, YouTube will generate a hi-resolution thumbnail for this video. To retrieve this thumbnail, you will need the video ID, which is the value of the v parameter in the URL. For example, since the URL of the video above is https://www.youtube.com/watch?v=nfQHF87vY0s, its ID should be nfQHF87vY0s.
The URL of the hi-resolution thumbnail for a video is http://i.ytimg.com/vi/{video_id}/maxresdefault.jpg. For the above YouTube video, we can find its hi-resolution thumbnail at http://i.ytimg.com/vi/nfQHF87vY0s/maxresdefault.jpg, which is the image below.
As you can see the quality of the image above is better than the thumbnail in the embedded video. The stars are sharper and have more details.
Adding a Click Handler
Now we have obtained the hi-res thumbnail, we can add a jQuery click handler to the thumbnail so that once the user clicks on the thumbnail, an iframe for the video will be generated and then we can hide the thumbnail. We will also add a parameter “autoplay” to the original URL for embedding and set its value to 1, so that once the iframe is loaded, the YouTube video will automatically start playing.
In the above example, the original code for embedding provided by YouTube is like this.
<iframe width="1280" height="720" src="https://www.youtube.com/embed/nfQHF87vY0s" frameborder="0" allowfullscreen></iframe>
We now change it to this.
<iframe width="1280" height="720" src="https://www.youtube.com/embed/nfQHF87vY0s?autoplay=1" frameborder="0" allowfullscreen></iframe>
And the jQuery click handler for the thumbnail is like this.
$thumbnail.on('click', function(e){
e.preventDefault();
src = src+'&autoplay=1'; // src: the original URL for embedding
$videoContainer.empty().append( $iframe.clone().attr({'src': src}) ); // $iframe: the original iframe for embedding
}
);
Now when you click the hi-res thumbnail, a new iframe will be generated and the video will automatically start playing. To see the demo, please go to the portfolio section of the Jordan template and click the third thumbnail.
Final Thoughts
Using a hi-res thumbnail for a YouTube video is necessary if you want to project a professional image for the website of your business. The above approach provided a solution to the low-res thumbnail problem of embedding YouTube videos.
*The example video used in this blog post is created by AstronautiCAST and used under the Creative Commons Attribution license (reuse allowed).
