<div>
<input type="url" placeholder="Enter Youtube video URL">
<a href="#" onClick="videoViews()">GO</a>
</div>
<div class="videoembed"></div>
<div class="views"></div>
--------------------------------------------------
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);
}
--------------------------------------------------
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;
}
--------------------------------------------------
Ref: http://jsfiddle.net/surendraVsingh/g39x3/
<input type="url" placeholder="Enter Youtube video URL">
<a href="#" onClick="videoViews()">GO</a>
</div>
<div class="videoembed"></div>
<div class="views"></div>
--------------------------------------------------
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);
}
--------------------------------------------------
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;
}
--------------------------------------------------
Ref: http://jsfiddle.net/surendraVsingh/g39x3/
Comments
Post a Comment