Skip to content

Instantly share code, notes, and snippets.

/index.html

Created August 25, 2016 18:02
Show Gist options
  • Save anonymous/6efad4690fda25969fee26e6baec878f to your computer and use it in GitHub Desktop.
Save anonymous/6efad4690fda25969fee26e6baec878f to your computer and use it in GitHub Desktop.
Download ZIP
Search Youtube Video via Js API // source http://jsbin.com/mawokik
Raw
index.html
<!doctype html>
<html>
<head>
<title>Search Youtube Video via Js API</title>
</head>
<body>
<div id="buttons">
<label> <input id="query" value='cats' type="text"/><button id="search-button" onclick="keyWordsearch()">Search</button></label>
<div id="container">
<h1>Search Results</h1>
<ul id="results"></ul>
</div>
<script>
function keyWordsearch(){
gapi.client.setApiKey('AIzaSyC58e6zvKEvwFLUu0PdwoqLSAVylUl98Zw');
gapi.client.load('youtube', 'v3', function() {
makeRequest();
});
}
function makeRequest() {
var q = $('#query').val();
var request = gapi.client.youtube.search.list({
q: q,
part: 'snippet',
type:'video',
maxResults: 10
});
request.execute(function(response) {
$('#results').empty()
var srchItems = response.result.items;
//console.log(srchItems);
$.each(srchItems, function(index, item) {
vidTitle = item.snippet.title;
vidThumburl = item.snippet.thumbnails.default.url;
vidThumbimg = '<pre><img id="thumb" src="'+vidThumburl+'" alt="No Image Available." style="width:204px;height:128px"></pre>';
console.log(item);
$('#results').append('<pre>' + vidTitle + vidThumbimg + '</pre> <br>Type: '+ item.id.kind +'<br>Id: ' + item.id.videoId);
})
})
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"> </script>
<script id="jsbin-source-html" type="text/html"><!doctype html>
<html>
<head>
<title>Search Youtube Video via Js API</title>
</head>
<body>
<div id="buttons">
<label> <input id="query" value='cats' type="text"/><button id="search-button" onclick="keyWordsearch()">Search</button></label>
<div id="container">
<h1>Search Results</h1>
<ul id="results"></ul>
</div>
<script>
function keyWordsearch(){
gapi.client.setApiKey('AIzaSyC58e6zvKEvwFLUu0PdwoqLSAVylUl98Zw');
gapi.client.load('youtube', 'v3', function() {
makeRequest();
});
}
function makeRequest() {
var q = $('#query').val();
var request = gapi.client.youtube.search.list({
q: q,
part: 'snippet',
type:'video',
maxResults: 10
});
request.execute(function(response) {
$('#results').empty()
var srchItems = response.result.items;
//console.log(srchItems);
$.each(srchItems, function(index, item) {
vidTitle = item.snippet.title;
vidThumburl = item.snippet.thumbnails.default.url;
vidThumbimg = '<pre><img id="thumb" src="'+vidThumburl+'" alt="No Image Available." style="width:204px;height:128px"></pre>';
console.log(item);
$('#results').append('<pre>' + vidTitle + vidThumbimg + '</pre> <br>Type: '+ item.id.kind +'<br>Id: ' + item.id.videoId);
})
})
}
<\/script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"><\/script>
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"> <\/script>
</body>
</html></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment