Hello Friends,
Before two days ago one of my client has been requested that he needs to show youtube video`s thumbnail image on page when user will click on that thumbnail one modelpopup will be open and in that model popup actual youtube video will be shown. To fullfill client`s request i have to create Youtube video`s thumbail on fly so when i was googling i have found one nice functionality of youtube.
Actually Youtube is providing one facility where it gives you all the video`s image file.
Let`s take example which will gives you more clear view what i m saying
Below i have added two links,
first link shows you youtube video link and second link shows you that same video has its own image on another server name as http://img.youtube.com/
1) http://www.youtube.com/watch?v=3Kk-yZ7VpeA
2) http://img.youtube.com/vi/3Kk-yZ7VpeA/0.jpg
So what you need to create Youtube video`s image thumbnail is YouTube video’s URL address or at least video’s YouTube ID.
Now i m going to give you one javascript code and one jquery code both will generates any Youtube video`s thumbnail image , you have to just supply Youtube video`s url.
Javscript Code
function getScreen( 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 Code
1) Add two jquery files into your page.
Form here you will get jqueryfile.
Form here you will get jyoutube.js file.
2) After that just use below code in your page which will give you thumbnail file of supplied youtube url.
$.jYoutube('http://www.youtube.com/watch?v=rSUfWXcNAOw', 'small');
Here is the example which will give you exact idea how to use jquey plugin in any html page.
<html>
<head>
<title>jYoutube - jQuery YouTube plugin demo</title>
<script src="jquery.js"></script>
<script src="jyoutube.js"></script>
<script type="text/javascript">
$(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
// using jYoutube jQuery plugin
url = $.jYoutube($('#url').val());
// Now append this image to <div id="thumbs">
$('#thumbs').append($('<img src="'+url+'" />'));
}
});
});
</script>
</head>
<body>
<div class="left">
<h1>Submit YouTube link</h1>
<form>
<input type="text" name="url" id="url"/>
<input type='button' value="Get Thumbnail" id="submit"/>
</form>
<p>Your YouTube video thumbs:</p>
<div id="thumbs"> </div>
</body>
</html>
Please add comments if you will find out any kind of problem in code i will help you out…
Tags: Create Youtube video`s image on fly, Get youtube video`s image/thumbnail
Author Of Site
Hello ! I am Arjun Jadeja a Software Engineer by Profession. You can contribute and I will distribute your ideas through this site. Thanks and Enjoy Chat With Me
Sponsered Links
RSS
Leave a reply