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>