Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Generate/Create Thumbnails From YouTube Video in JQuery Using Asp.net

Sep 16, 2012
Introduction:

In this article I will explain how to create or generate thumbnails from YouTube videos in JQuery using Asp.net.

Description:

In previous article I explained Generate thumbnail from images in asp.net and many articles relating to JQuery, asp.net, SQL Server etc. Now I will explain how to generate or create thumbnails from YouTube videos using JQuery in asp.net.

To generate thumbnails from YouTube videos we can use YouTube API URL that would be like this



http://img.youtube.com/vi/YouTubeVideoId/0.jpg
To test above URL replace YouTubeVideoId with some YouTube video id like “TzzGPfVx32M” and run the URL it will show thumbnail image of video. If you observe thumbnail it was somewhat bigger because we mentioned “0.jpg” this means bigger thumbnail if you want generate thumbnail in other smaller sizes we can specify 1, 2 or 3.jpg 

For our demo purpose here I am using Ice Age 4Continental Drift - Trailer and binding different size of thumbnails using JQuery check below code


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JQuery Create Thumbnails For YouTube Videos</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#imgThumb0').attr('src', 'http://img.youtube.com/vi/TzzGPfVx32M/0.jpg');
$('#imgThumb1').attr('src', 'http://img.youtube.com/vi/TzzGPfVx32M/2.jpg');
})
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img id="imgThumb0" alt="Thumbnail0" />
<img id="imgThumb1" alt="Thumbnail1" />
</div>
</form>
</body>
</html>
Demo


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

10 comments :

Anonymous said...

hi suresh, can you post any article for capturing thumbnails from a video file present in our folder of the project...

thanks
shameer ali

Unknown said...

hi,
thanks for all link
all link are supported me in my project so,
thanks....
HIREN

Anonymous said...

hi..
i am suresh kumar from tamilnadu... can you tell me how to add a video in my website???
please help to me..


thanx

1004 said...
This comment has been removed by the author.
Anonymous said...

So how to get the time of that image?

hermès said...

How to type words on the image? What kind of software can I use?

honey said...

Sir can u please help me in making youtube like site. Can u please tell me which is the best way to store and display youtube videos in asp.net c#.

Anonymous said...

but please how do i use this example to create a thumbnail for videos i uploaded on my system not youtube?.

veerendra said...

suresh kumar we have video tag in html

Unknown said...

best site for .net

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.