How to ? Programming tricks Tips Utility

How To Display View Count Below Your Embeded YouTube Video

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.

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.

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>"; = "5px"; = "table"; = "relative"; = "right"; = "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=''/>"+data.entry["yt$rating"].numLikes+"<img style='margin: 0px 5px 0px 20px' src=''/>"+data.entry["yt$rating"].numDislikes+"</div>";
myFrames[fetched].parentNode.insertBefore(div, myFrames[fetched].nextSibling); = (parseInt(myFrames[fetched].offsetLeft)+parseInt(myFrames[fetched].width)-parseInt(div.clientWidth))+"px";
if(fetched < myFrames.length-1){

function loadViewCount(){
var script = document.createElement('script');
var videoId = myFrames[fetched].src.split("embed/")[1].split("?")[0];
script.src = ""+videoId+"?v=2&alt=json&callback=showViewCount";
function initProps(){
var allFrames = document.getElementsByTagName("iframe")
for(var i=0;i<allFrames.length;i++){

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.

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.