Youtube-Suche-Api.php
Quell Code
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="container">
<h1>Search <span>Vids</span></h1>
<p>Search all YouTube Videos</p>
<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>
<script>
var gapikey = 'AIzaSyCKMpw2nmPnon_gkh4EIXnbiAmrZNw-v4M';
$(function() {
$(".fancyboxIframe").fancybox({
maxWidth : 900,
maxHeight : 600,
fitToView : true,
width : '900px',
height : '600px',
autoSize : false,
closeClick : true,
openEffect : 'none',
closeEffect : 'none',
iframe: {
scrolling : 'auto',
preload : true
}
});
var searchField = $('#query');
var icon = $('#search-btn');
$(searchField).on('focus', function() {
$(this).animate({
width: '90%'
}, 400);
$(icon).animate({
right: '21px'
}, 400);
});
$(searchField).on('blur', function() {
if(searchField.val() == '') {
$(searchField).animate({
width: '45%'
}, 400, function(){});
$(icon).animate({
right: '304px'
}, 400, function(){});
}
});
$('#search-form').submit( function(e) {
e.preventDefault();
});
});
function search() {
$('#results').html('');
$('#buttons').html('');
q = $('#query').val();
$.get(
"https://www.googleapis.com/youtube/v3/search", {
maxResults: "50",
part: "snippet",
q: q,
type: 'video',
key: gapikey
}, function(data) {
var nextPageToken = data.nextPageToken;
var prevPageToken = data.prevPageToken;
console.log(data);
$.each(data.items, function(i, item) {
var output = getOutput(item);
$('#results').append(output);
});
var buttons = getButtons(prevPageToken, nextPageToken);
$('#buttons').append(buttons);
});
}
function nextPage() {
var token = $('#next-button').data('token');
var q = $('#next-button').data('query');
$('#results').html('');
$('#buttons').html('');
q = $('#query').val();
$.get(
"https://www.googleapis.com/youtube/v3/search", {
part: 'snippet, id',
q: q,
pageToken: token,
type: 'video',
key: gapikey
}, function(data) {
var nextPageToken = data.nextPageToken;
var prevPageToken = data.prevPageToken;
console.log(data);
$.each(data.items, function(i, item) {
var output = getOutput(item);
$('#results').append(output);
});
var buttons = getButtons(prevPageToken, nextPageToken);
$('#buttons').append(buttons);
});
}
function prevPage() {
var token = $('#prev-button').data('token');
var q = $('#prev-button').data('query');
$('#results').html('');
$('#buttons').html('');
q = $('#query').val();
$.get(
"https://www.googleapis.com/youtube/v3/search", {
part: 'snippet, id',
q: q,
pageToken: token,
type: 'video',
key: gapikey
}, function(data) {
var nextPageToken = data.nextPageToken;
var prevPageToken = data.prevPageToken;
console.log(data);
$.each(data.items, function(i, item) {
var output = getOutput(item);
$('#results').append(output);
});
var buttons = getButtons(prevPageToken, nextPageToken);
$('#buttons').append(buttons);
});
}
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;
var output = '<li>' +
'<div class="list-left">' +
'<img src="' + thumb + '">' +
'</div>' +
'<div class="list-right">' +
'<h3><a data-fancybox-type="iframe" class="fancyboxIframe" href="https://youtube.com/embed/' + videoID + '?rel=0">' + title + '</a></h3>' +
'<small>By <span class="cTitle">' + channelTitle + '</span> on ' + videoDate + '</small>' +
'<p>' + description + '</p>' +
'</div>' +
'</li>' +
'<div class="clearfix"></div>' +
'';
return output;
}
function getButtons(prevPageToken, nextPageToken) {
if(!prevPageToken) {
var btnoutput = '<div class="button-container">' +
'<button id="next-button" class="paging-button" data-token="' + nextPageToken + '" data-query="' + q + '"' +
'onclick = "nextPage();">Next Page</button>' +
'</div>';
} else {
var btnoutput = '<div class="button-container">' +
'<button id="prev-button" class="paging-button" data-token="' + prevPageToken + '" data-query="' + q + '"' +
'onclick = "prevPage();">Prev Page</button>' +
'<button id="next-button" class="paging-button" data-token="' + nextPageToken + '" data-query="' + q + '"' +
'onclick = "nextPage();">Next Page</button>' +
'</div>';
}
return btnoutput;
}
</script>