Thursday, February 13, 2014
How to fetch youtube video thumbnail title using javascript
Hi friends, we have discussed about pagination tutorial using PHP and MySql in previous post. In this tutorial I came up with a script to fetch youtube videos on the client side using javascript. Sometimes we need to put video thumbnail and it's title to show as gallery. I worried about fetching videos into my website first. I googled for the code and found youtube API code. Using youtube API we can retrieve upto 50 videos. Youtube API code fetches last 50 videos uploaded by the user through feeds.
Now let me explain you about the javascript code to fetch youtube videos. It contains a small code that fetches the video thumbnails directly from youtube into your site. You just need to put video id into the code. Here in this tutorial I have included CSS styles to give a style to the video thumbnails.
Javascript code with HTML:
<div id="vidC">
<div id="vidThumb">
<script type="text/javascript">
//function to call youtube feeds
function youtubeFeedCallback(data) {
var s = '';
s += '<img src="http://i1.ytimg.com/vi/YOUTUBE-VIDEO-ID/mqdefault.jpg"/>'; //fetching the thumbnail image of the video
s += '<p style="color:white; font-size:13px;"> ' + data.entry.title.$t + '</p>'; //here we get the title of the video
document.write(s);//writes the above values in HTML
}
</script>
<!--youtube feeds API-->
<script type="text/javascript" src="http://gdata.youtube.com/feeds/api/videos/YOUTUBE-VIDEO-ID?v=2&alt=json-in-script&callback=youtubeFeedCallback"></script>
</div>
Copy the above code and replace YOUTUBE-VIDEO-ID with the video ID from youtube.
Ex:
<script type="text/javascript">
//function to call youtube feeds
function youtubeFeedCallback(data) {
var s = '';
s += '<img src="http://i1.ytimg.com/vi/mhzyi9nDHFI/mqdefault.jpg"/>'; //fetching the thumbnail image of the video
s += '<p style="color:white; font-size:13px;"> ' + data.entry.title.$t + '</p>'; //here we get the title of the video
document.write(s);//writes the above values in HTML
}
</script>
<!--youtube feeds API-->
<script type="text/javascript" src="http://gdata.youtube.com/feeds/api/videos/mhzyi9nDHFI?v=2&alt=json-in-script&callback=youtubeFeedCallback"></script>
If you want to include styles then just copy the below CSS code.
<style>Put these both blocks of code in a file and save it in HTML. Now the code will fetch the youtube thumbnails along with their titles.
#vidC {
width: 282px;
height: 190px;
padding: 5px;
margin-right: 15px;
background-color: #000000;
box-shadow:2px 0px 10px #333333;
margin-bottom: 20px;
float: left;
}
#vidThumb img{
width: 282px;
height: 158px;
padding: 0;
border:none;
}
</style>
Thank you. Please comment below if you need any help regarding this tutorial.
Author: Bhanu Chander Bathini (CEO, Tricks Town.)
Tired of checking for new posts ?
Subscribe to:
Post Comments (Atom)
0 comments: