Effettuare ricerche con le API di YouTube è semplice con jQuery.
Partiamo dalla seguente marcatura:
<body>
<form action="" method="get" id="search-youtube">
<div>
<input type="text" name="q" id="q" />
<input type="submit" value="Cerca" />
</div>
</form>
<div id="response"></div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="app.js"></script>
<script src="https://apis.google.com/js/client.js?onload=init"></script>
</body>
Il metodo init() deve essere globale. Per questo motivo strutturiamo il codice jQuery come segue:
(function( $ ) {
var App = {
init: function() {
gapi.client.setApiKey( "Chiave API" );
gapi.client.load( "youtube", "v3", function() {
App.getVideos();
});
},
getVideos: function( query ) {
query = query || "jquery";
var request = gapi.client.youtube.search.list({
part: "snippet",
type: "video",
q: query,
maxResults: 6,
order: "viewCount"
});
request.execute(function( response ) {
var results = response.result;
var html = "";
$.each( results.items, function( index, item ) {
var title = item.snippet.title;
var id = item.id.videoId;
html += "<div class='video'>";
html += '<iframe width="560" height="315" src="https://www.youtube.com/embed/' + id + '?controls=0" frameborder="0" allowfullscreen></iframe>';
html += "<h3>" + title + "</h3>";
html += "</div>";
});
$( "#response").html( html );
});
}
};
$(function() {
$( "#search-youtube").submit(function( e ) {
e.preventDefault();
var queryStr = encodeURIComponent( $( "#q" ).val() ).replace( /%20/g, "+" );
App.getVideos( queryStr );
});
});
window.init = App.init;
})( jQuery );
Alcune raccomandazioni:
- Il codice non funziona in locale.
- Dopo aver creato la vostra app nella console di Google e ottenuto la chiave API delle API di YouTube, dovete limitare l'accesso ad uno specifico dominio per evitare che la vostra app venga usata da chiunque.