Last updated on May 25th, 2016 at 01:14 pm

VN:F [1.9.22_1171]
Rating: 7.9/10 (17 votes cast)

Get youtube video screenshot using Jquery

This is yet another script using Jquery to get the Youtube video screenshot.

Youtube normally saves screenshot under this URL http://img.youtube.com/vi/{VIDEOID}/

For getting video screenshot then http://img.youtube.com/vi/{VIDEOID}/0.jpg will have it.

If you want thumbnails of a video then http://img.youtube.com/vi/{VIDEOID}/1.jpg, 2.jpg, 3.jpg etc., will be available.

You might also be interested in this tutorial Get Youtube Video Screenshot Using Javascript

We are parsing the URL you supply and get the video ID from the query string. Pass that video ID to the above image URL to get the screenshots / thumbnails.

<html>
<head>
<script src="http://mistonline.in/wp/demo/jquery-1.2.3.min.js"></script>
<title>Mistonline.in , Youtube Screenshot Demo</title>
<script type="text/javascript">
//script from Mistonline.in (Please dont remove this line)
(function($){
	$.extend({
		jYoutube: function( url, size ){
			if(url === null){ return ""; }
			size = (size === null) ? "big" : size;
			var vid;
			var results;
			results = url.match("[\\?&]v=([^&#]*)");
			vid = ( results === null ) ? url : results[1];
			if(size == "small"){
				return "http://img.youtube.com/vi/"+vid+"/2.jpg";
			}else {
				return "http://img.youtube.com/vi/"+vid+"/0.jpg";
			}
		}
	})
})(jQuery);
$(document).ready(function(){
    // Get youtube video thumbnail on user click
    var url = '';
    $('#submit').click(function(){
        // Check for empty input field
        if($('#url').val() != ''){
            // Get youtube video's thumbnail url
            url = $.jYoutube($('#url').val());
            // Now append this image to <div id="thumbs">
            $('#youtubethumbs').append($('<img src="'+url+'" />'));
        }
    });
});
</div></script>

</head>
<body>
<div class="left">
<h1>Submit YouTube Video link</h1>
<form>
  <input type="text" name="url" id="url"/>
  <input type='button' value="Get Video Thumbnail" id="submit"/>
</form>
<p>Your YouTube video thumbs:</p>
<div id="youtubethumbs"> </div>
</div></body>
</html>

DEMO

Disclaimer: We are not responsible for usage of this script. This script is widely available in the Internet. All we are doing here is helping our users to understand how best we can use Jquery.

VN:F [1.9.22_1171]
Rating: 7.9/10 (17 votes cast)

Leave a Reply

Your email address will not be published. Required fields are marked *