How to display particular youtube video's thumbnail in blogger

In this article im gonna show you how to display particular youtube video's thumbnail in blogger.

In my recent article How to display thumbnails of youtube videos in blogger I have shown you how to display an youtube video thumbnail in home page but not in video page. Now im gonna show you how to display particular youtube video's thumbnail in blogger.

Step 1: Embed youtube video in the post. If you don't know how to embed read my article How To Embed A Youtube Video In Blogger. Note : Copy the link of your video and paste some where for future use.

Step 2: Now insert a image of your wish in post before the video.

Step 3: Now remember that every youtube video link has a unique code in the end of the link, for example see the codes highlighted in red background, https://www.youtube.com/watch?v=Fs0FBewPwK0, https://www.youtube.com/watch?v=B4nigdAbwlo etc.. And also observe that this code comes after the v= letters in the link Now copy your unique code which is present in your copied youtube URL link.

Step 4: Now this step is some what critical. Go to HTML view of your post and search for <img in the code. You will see some code similar to something like this line <img border="0" height="254" src="https://ytimg.googleusercontent.com/vi/JcoCrgmFHBQ/0.jpg" width="320" />. Now observe that there is a word named src in the line and it has some text in between the quotes, like src="https://ytimg.googleusercontent.com/vi/JcoCrgmFHBQ/0.jpg". The text in between the quotes is link of your video thumbnail. Now we have to change it to desired thumbnail.

Step 5: Copy this link - https://ytimg.googleusercontent.com/vi/JcoCrgmFHBQ/0.jpg - and replace the green part in the link with your unique video code. Which should look like https://ytimg.googleusercontent.com/vi/YOUR-CODE/0.jpg and now paste the entire changed link in between the src="" (double quotes). which should look like <img border="0" height="254" src="https://ytimg.googleusercontent.com/vi/YOUR-CODE/0.jpg" width="320" />

Step 6: Now search for style=" and after "(double-quotes) write display: none; (remember, you will find style=" for many times in the whole code but you have to write the display: none;  property for the image one only. For rest style=" properties you just leave them because they are the properties of video and some other and we are not doing anything for them). see the images below

Clicking on HTML button

 HTML view of a post

finding style=" code

As you can see above there are lot of style=" tags in the code we are going to add display: none; property only to the image but not to anything other as shown in image below

(don't worry, the property can place any where in the brackets but should start after the ';'(semi-colon) of previous property and should end with a ';' (semi-colon))

 

Step 7: Now just save the post and BAM! You got your video thumbnail which is particular to your video in home page but not in post page :)

Hope i explained you the procedure in well manner, still if you have any doubts let me know through comments :)