Last updated on December 14th, 2022 at 02:25 pm
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>
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.
admin