Created
March 23, 2017 16:32
-
-
Save noogler617/c4968a958b61865b59784c7e11454546 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>YouTube API Search</title> | |
<link rel="stylesheet" type="text/css" href="../YTsearch/style.css"> | |
<script src="../script/jquery.min.js"></script> | |
<script src="../YTsearch/script.js" type="">></script> | |
</head> | |
<body> | |
<div id="container"> | |
<header> | |
<h1>Search<span>Vidz</span></h1> | |
<p>Search all YouTube Video's</p> | |
</header> | |
<section> | |
<form id="search-form" name="search-form" onsubmit="return search()"> | |
<div class="fieldcontainer"> | |
<input type="search" id="query" class="search-field" placeholder="Search YouTube"> | |
<input type="submit" name="search-btn" id="search-btn" value=""> | |
</div> | |
</form> | |
<ul id="results"></ul> | |
<div id="buttons"></div> | |
</section> | |
</div> | |
</body> | |
</html> | |
<style> | |
* { | |
padding: 0; | |
margin: 0; | |
} | |
body { | |
font-family: 'Ariel', sans-serif; | |
line-height: 1.6em; | |
color: #666; | |
background: #5561FF; | |
} | |
a { | |
color: #333; | |
text-decoration: none; | |
} | |
#container { | |
width: 740px; | |
background: #fff; | |
margin: auto; | |
} | |
.clearfix { | |
clear: both; | |
} | |
header { | |
padding: 30px 20px; | |
background: #f4f4f4; | |
} | |
header h1 { | |
color: #000; | |
margin-bottom: 5px; | |
} | |
header span { | |
color: #dd2826; | |
} | |
section { | |
padding: 30px 20px; | |
#search-form { | |
display: block; | |
margin-bottom: 15px; | |
} | |
.fieldcontainer { | |
display: block; | |
position: relative; | |
width: 90%; | |
margin: 0 auto; | |
} | |
#search-btn:hover { | |
filter: alpha(opacity=90); | |
opacity: 0.9; | |
} | |
.search-field { | |
-moz-box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
display: block; | |
width: 45%; | |
padding: 11px 7px; | |
padding-right: 43px; | |
background: #fff; | |
color: #ccc; | |
border: 1px solid #c8c8c8; | |
font-size: 1.6em; | |
border-bottom-color: #d2e2e7; | |
-moz-border-radius: 1px; | |
-webkit-border-radius: 1px; | |
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 0 0 6px #f0f0f0; | |
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 0 0 6px #f0f0f0; | |
box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 0 0 6px #f0f0f0; | |
} | |
#search-btn { | |
position: absolute; | |
right: 360px; | |
top: 5px; | |
height: 32px; | |
width: 32px; | |
border: 0; | |
cursor: pointer; | |
zoom: 1; | |
filter: alpha(opacity=65); | |
opacity: 0.65; | |
} | |
#search-btn:hover { | |
filter: alpha(opacity=90); | |
opacity: 0.9; | |
} | |
</style> | |
<script> | |
$(function(){ | |
var searchField = $('#query'); | |
var icon = $('#search-btn'); | |
$(searchField).on('focus', function() { | |
// body... | |
$(this).animate({ | |
width:'100%' | |
}),400; | |
$(icon).animate({ | |
right: '10px' | |
}, 400); | |
}); | |
//Blur Event | |
$(searchField).on('blur', function() { | |
// body... | |
if(searchField.val() == ""){ | |
$(searchField).animate({ | |
width: '45%' | |
}, 400, function(){}); | |
$(icon).animate({ | |
right: '360px' | |
}); | |
} | |
}); | |
$('#search-form').submit(function(e){ | |
e.preventDefault(); | |
}); | |
}); | |
function search(){ | |
// clear Results | |
$('#results').html(''); | |
$('#buttons').html(''); | |
//Get Form Input | |
q = $('#query').val(); | |
//Run GET Request on API | |
$.get( | |
"http://www.googleapis.com/youtube/v3/search", { | |
part: 'snippet, id', | |
q: q, | |
type: 'video', | |
key: 'AIzaSyDky518iClL-5IxYF6QYRFoiOyT5OrFkfk'}, | |
function(data){ | |
var nextPageToken = data.nextPageToken; | |
var prevPageToken = data.prevPageToken; | |
console.log(data); | |
$.each(data.item, function(i, item){ | |
//Get Output | |
var output = getOutput(item); | |
//Display results | |
$('#results').append(output); | |
}); | |
} | |
); | |
} | |
//Build Output | |
function getOutPut(item){ | |
var videoId = item.id.videoId; | |
var title = item.snippet.title; | |
var description = item.snippet.description; | |
var thumb = item.snippet.thumbnails.high.url; | |
var channelTitle = item.snippet.channelTitle; | |
var videoDate = item.snippet.publishedAt; | |
//Build Output String | |
var output = '<li>' + '<div class="list-left>' + | |
'img src="'+thumb+'">' | |
'</div>' + | |
'<div class="list-right">' + | |
'<h3>'+title+'</h3>' + | |
'<small>By <span class="cTitle">'+channelTitle+'</span> on '+videoDate+'</small>' + | |
'<p>'+description+'</p>' + | |
'</div>' + | |
'</li>' + | |
'<div class=""clearfix></div>' + | |
''; | |
return output; | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment