YouTube video statistics such as view count & like count are very important factors depicting popularity of a video. YouTube displays these counts below the videos on its own site. But unfortunately when you embed a video in another site these counts never displayed directly below the video. Although you can view the count by clicking the info(i) button present at the top left, but anybody will barely click on that button to view the statistics. So here is a trick which can help you to directly display the count below the embeded video.
Following is an awesome video of Hanu Dixit with Michael Stevens (Vsauce). Have a look how the view counts work.
Here are some of its benefit you will like
Well, it works with YouTube API. The API returns the counts in JSON format which is later formatted to properly display in HTML. Following is the URL which fetches the count.
http://gdata.youtube.com/feeds/api/videos/YOUR_VIDEO_ID?v=2&alt=json&callback=showViewCount
The script dynamically provides the video ID to above url and gets the response back.
Hope you all like it. Let me know your view via comments.
Lets have a LIVE DEMO before moving ahead
Following is an awesome video of Hanu Dixit with Michael Stevens (Vsauce). Have a look how the view counts work.
So how to display it below your own video
Displaying it below your own video is very easy. Simply copy and paste the following code in your site. You can also add it as a plugin in your side bar/header/footer section. It will automatically start displaying the view count wherever it will find an embeded video.
<script>
var myFrames=[];
var fetched = -1;
if (window.addEventListener){window.addEventListener('load', initProps, false);
window.addEventListener('load', loadViewCount, false);
}
else if (window.attachEvent){window.attachEvent('onload', initProps);
window.attachEvent('onload', loadViewCount);
}
function showViewCount(data){
var div = document.createElement('div');
div.innerHTML ="<b>"+data.entry["yt$statistics"].viewCount+"</b>";
div.style.marginTop = "5px";
div.style.display = "table";
div.style.position = "relative";
div.style.textAlign = "right";
div.style.fontFamily = "Arial";
div.innerHTML += "<div style='border-bottom: 2px solid #c0c0c0;width:100%;margin: 5px 0px 5px 0px'></div>"
div.innerHTML += "<div><img style='margin: 0px 5px 0px 20px' src='http://i.imgur.com/1y1eaVA.png'/>"+data.entry["yt$rating"].numLikes+"<img style='margin: 0px 5px 0px 20px' src='http://i.imgur.com/vwWod4J.png'/>"+data.entry["yt$rating"].numDislikes+"</div>";
myFrames[fetched].parentNode.insertBefore(div, myFrames[fetched].nextSibling);
div.style.left = (parseInt(myFrames[fetched].offsetLeft)+parseInt(myFrames[fetched].width)-parseInt(div.clientWidth))+"px";
if(fetched < myFrames.length-1){
loadViewCount();
}
}
function loadViewCount(){
fetched++;
var script = document.createElement('script');
var videoId = myFrames[fetched].src.split("embed/")[1].split("?")[0];
script.src = "http://gdata.youtube.com/feeds/api/videos/"+videoId+"?v=2&alt=json&callback=showViewCount";
myFrames[fetched].parentNode.appendChild(script);
}
function initProps(){
var allFrames = document.getElementsByTagName("iframe")
for(var i=0;i<allFrames.length;i++){
if(allFrames[i].src.indexOf("youtube")>=0)
myFrames.push(allFrames[i]);
}
}
</script>
Here are some of its benefit you will like
- It works for multiple videos as well
- You must not worry about the layout and alignment of already embeded video. Above code will automatically display their counts at corresponding places.
- It uses YouTube API to fetch the count so it renders faster.
- Like & dislike count also gets displayed below the view count
How does it work
Well, it works with YouTube API. The API returns the counts in JSON format which is later formatted to properly display in HTML. Following is the URL which fetches the count.
http://gdata.youtube.com/feeds/api/videos/YOUR_VIDEO_ID?v=2&alt=json&callback=showViewCount
The script dynamically provides the video ID to above url and gets the response back.
Hope you all like it. Let me know your view via comments.
Thank you, I found it appropriate for me, I will apply them to your youtobe page.
How do you change the positioning of the actual data? When I enter it in my blog, the data is too far right into another container. I want the data to show in the container with the actual video embed.
I don’t where the result get displayed.?