Youtube Search API Website
Youtube API:
To Create an YouTube API web application you should get an API key from developers.google.com
After having your API key....
Start creating the Website
Create a folder called js/app.js from the root of your project and Paste this Code,
function tplawesome(e,t){res=e;for(var n=0;n<t.length;n++){res=res.replace(/\{\{(.*?)\}\}/g,function(e,r){return t[n][r]})}return res}
$(function() {
$(".form-control").click(function(e) {
e.preventDefault();
// prepare the request
var request = gapi.client.youtube.search.list({
part: "snippet",
type: "video",
q: encodeURIComponent($("#search").val()).replace(/%20/g, "+"),
maxResults: 20,
order: "viewCount",
publishedAfter: "2017-01-01T00:00:00Z"
});
// execute the request
request.execute(function(response) {
var results = response.result;
$("#results").html("");
$.each(results.items, function(index, item) {
$.get("tpl/item.html", function(data) {
$("#results").append(tplawesome(data, [{"title":item.snippet.title, "videoid":item.id.videoId ,"descrip":item.snippet.description ,"date":item.snippet.publishedAt ,"channel":item.snippet.channelTitle ,"kind":item.id.kind ,"lan":item.id.etag}]));
});
});
resetVideoHeight();
});
});
$(window).on("resize", resetVideoHeight);
});
function resetVideoHeight() {
$(".video").css("height", $("#results").width() * 9/16);
}
function init() {
gapi.client.setApiKey("YOUR API KEY .... USE YOUR KEY");
gapi.client.load("youtube", "v3", function() {
// yt api is ready
});
}
Make Sure you pasted your API key in this Script file,
Now create a folder called tpl and create a file name item.html in it.
Now, Paste this HTML code
<style type="text/css">
.need{
background-color: #333;
border-radius: 0.6em;
font-family: 'Open Sans', sans-serif;
}
.need h3{
padding: 20px;
margin: 0px;
font-family: 'Open Sans', sans-serif;
}
.need h3 a{
color: #fff;
font-family: 'Open Sans', sans-serif;
}
.need p{
background-color: #e3e3e3;
font-family: 'Open Sans', sans-serif;
color: #333;
padding: 20px;
}
.need1{
width: 100%;
}
.btn{
border: none;
font-size: 0.8em;
}
.btn:hover{
background-color: #000;
color: #fff;
border: none;
}
.ress{
border-radius:0.7em;
}
</style>
<br>
<!--
<div class="need">
<h3><a href="http://www.youtube.com/embed/{{videoid}}">{{title}}</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
-->
<section class="ress">
<div class="row">
<div class="masonry">
<div class=""></div>
<article class="" data-aos="">
<div class="entry__text">
<div class="entry__header">
<div class="entry__date">
<a href="#">Published at : {{date}}</a>
</div>
<h1 style="text-transform: capitalize;" class="entry__title"><a href="./stream-online.php?id={{videoid}}&title={{title}}&des={{descrip}}&chan={{channel}}&da={{date}}&typ={{kind}}">{{title}}</a></h1>
<img src="https://img.youtube.com/vi/{{videoid}}/hqdefault.jpg">
</div>
<div class="entry__excerpt">
<p style="color: #777;padding: 0px;margin: 0px;">
Description : {{descrip}}
</p>
</div>
<div class="entry__meta">
<span class="entry__meta-links">
<a href="#">Source : {{channel}}</a>
<br>
<a href="#">#Video/Audio</a>
</span>
<br>
<!--https://youtube.com/watch?v={{videoid}}-->
<br>
<a href="./mp3lio-musicplayer.php?id={{videoid}}&title={{title}}&des={{descrip}}&chan={{channel}}&da={{date}}&typ={{kind}}"><p class="btn btn-danger"> <i class="fa fa-play"></i> Play</p></a>
<a href="./stream-online.php?id={{videoid}}&title={{title}}&des={{descrip}}&chan={{channel}}&dat={{date}}&typ={{kind}}"><p class="btn btn-danger"> <i name="q" style="font-size: 1.4em;" class="fa fa-video"></i> Play Video</p></a>
<a href="./download.php/?url={{videoid}}" target="_blank"><p class="btn btn-danger"> <i class="fa fa-download"></i> Download</p></a>
<br>
<a style="color: #000;" href="#">Music</a>
</div>
</div>
</article>
</div>
</div>
</section>
<div id="player"></div>
<!--<iframe class="video w100" width="640" height="360" src="//www.youtube.com/embed/{{videoid}}" frameborder="0" allowfullscreen></iframe>-->
Now, create a file called search.php in the root an paste this code:
<section style="padding-bottom: 0px;" class="s-pageheader--home">
<header class="header" style="margin: 0px;padding: 0px;">
<div class="header__content row">
<div style="padding: 0px;" class="header__logo">
<a class="logo" style="font-size: 1.2em;color: #fff;" href="index.php">
Music Vibes
</a>
</div> <!-- end header__logo -->
<ul class="header__social">
<li>
<a href="#0"><i class="fa fa-facebook" aria-hidden="true"></i></a>
</li>
<li>
<a href="#0"><i class="fa fa-twitter" aria-hidden="true"></i></a>
</li>
<li>
<a href="#0"><i class="fa fa-instagram" aria-hidden="true"></i></a>
</li>
<li>
<a href="#0"><i class="fa fa-pinterest" aria-hidden="true"></i></a>
</li>
</ul> <!-- end header__social -->
<a class="header__search-trigger" href="#0"></a>
<div class="header__search">
<form role="search" method="GET" class="header__search-form" id="youtubesearch" action="./search.php">
<span class="hide-content">Search for:</span>
<input style="color: #fff;" type="search" id="search" class="search-field" placeholder="Type Keywords" value="<?php echo $name ?>" name="q" title="Search for:" autocomplete="off">
<br>
<button id="butt" type="submit" value="Search" class="form-control" name="search">Submit</button>
</form>
<a href="#0" title="Close Search" class="header__overlay-close">Close</a>
</div> <!-- end header__search -->
<a class="header__toggle-menu" href="#0" title="Menu"><span>Menu</span></a>
<nav class="header__nav-wrap">
<h2 class="header__nav-heading h6">Site Navigation</h2>
<ul class="header__nav">
<li><a href="index.php" title="">Home</a></li>
<li><a href="navigation-catogery.php" title="">Categories</a></li>
<li><a href="music.php" title="">Music</a></li>
<li class="current"><a href="search.php" title="">Search</a></li>
<li><a href="trending.php" title="">Trending</a></li>
<li><a href="#" title="">About</a></li>
<li><a href="#" title="">Contact</a></li>
</ul> <!-- end header__nav -->
<a href="#0" title="Close Menu" class="header__overlay-close close-mobile-menu">Close</a>
</nav> <!-- end header__nav-wrap -->
</div> <!-- header-content -->
</header> <!-- header -->
<div style="padding: 10px;" class="">
<div class="row">
<a style="font-size: 1.5em;" href="#"><p id="ress" style="color: #fff; padding: 0px;margin: 0px;text-align: center;">Search here for Anything</p></a>
<div style="color: #fff;border-radius: 0.6em;" id="results"><div style="text-align: center;" class="loader"></div> <span style="width: 100%; text-align: center;">Loading ... </span></div>
</div>
</div>
<!-- end pageheader-content row -->
</section> <!-- end s-pageheader -->
<style type="text/css">
@media only screen and (max-width: 800px){
.need audio{
width: 200px;
}
}
</style>
<!-- scripts -->
<script>
setTimeout(function myFunction4(){
var elementClicked;
$("butt").click(function(){
elementClicked = true;
});
if( elementClicked != true ) {
console.log("Not Clicked");
document.getElementById("butt").click();
}else{
console.log("Clicked");
alert("element clicked");
}
},5000)
setInterval(function(){
var textfeid = document.getElementById('search').value;
$('#ress').html("Search results : "+textfeid);
$('title').text("MP3 Lio - "+textfeid);
},1000)
setTimeout(function myFunction2(){
},8000)
</script>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
then Starting using it with an XAMP server.
The Complete Application is LIVE at musicvibes.cf
Check the Source code at https://github.com/rpsnaik/youtube-api-website/
Comments
Post a Comment