Youtube Video Views

Get Youtube Video views from a video url.

by surendraVsingh

HTML

<div>
    <input type="url" placeholder="Enter Youtube video URL"> 
    <a href="#" onClick="videoViews()">GO</a>
 </div>
<div class="videoembed"></div>
<div class="views"></div>

CSS

div {
    font-size: 50px;
    margin: 30px 0;
    text-align: center;
}
input {
    display:inline-block;
    font-size:15px;
    margin-right: -25px;
    padding:10px 10px;
    width:300px;
}
a {
    background: #e74c3c;
    color: #fff;
    font-size:20px;
    padding: 10px;
    text-decoration: none;
}

JavaScript

function videoViews() {
    var rex = /[a-zA-Z0-9\-\_]{11}/,
        videoUrl = $('input').val() === '' ? alert('Enter a valid Url'):$('input').val(),
        videoId = videoUrl.match(rex),
        jsonUrl = 'http://gdata.youtube.com/feeds/api/videos/' + videoId + '?v=2&alt=json',
       embedUrl = '//www.youtube.com/embed/' + videoId,
       embedCode = '<iframe width="350" height="197" src="' + embedUrl + '" frameborder="0" allowfullscreen></iframe>'
    
    
    //Get Views from JSON
    $.getJSON(jsonUrl, function (videoData) {
        var videoJson = JSON.stringify(videoData),
            vidJson = JSON.parse(videoJson),
            views = vidJson.entry.yt$statistics.viewCount;
        $('.views').text(views);
    });
    
    //Embed Video
    $('.videoembed').html(embedCode);
}