Tuesday, March 4, 2014
How to display thumbnails of youtube videos in blogger. 100% working.
Posted by Muji in: [ All Tech Corner ] [ Blogging ]
If anybody of you have got a video blogging website in blogger, then i assure you that you had this experience, the experience of no display of youtube thumbnails in homepage of blogger. Many members inserts image in the video post for displaying that image as thumbnail in homepage but the problem is that it will also shows up in the video post page also. Like the image below
But we want the thumbnail to display in only homepage but not in the post's page. Like the image below.
For this we have to hide the image in video post and have to display it in homepage. So how to hide the image in video page? Well I had done a small research about this and made a simple solution. Today im gonna teach you how to display thumbnails of youtube videos in homepage blogger.
I hope you people has an better idea about how to embed a video in a post. If you dont know how to embed a youtube video in blogger then read my article How To Embed A Youtube Video In Blogger.
After embedding the video in the post insert a image of your wish before the video. This image be gonna thumbnail of that video so select an proper image. Or read my article How to display particular youtube video's thumbnail in blogger.
Now click on html view of the post and search for style=" and after " 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))
Now just save the post and BAM! You got your video thumbnail 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 :)
About Admin of the Blog:
Muji is the founder of AllTechCorner. Muji is a tech blogger and high qualified web developer. Contact him here
0 comments:
Post a Comment