
В версии 3 API от Youtube были изменения, из-за чего работа с ним поначалу вызывает сложности. Рассмотрим как реализовать вставку на страницы песенного сайта нескольких роликов, выбираемых из Youtube. Этот способ мы внедрили в loco.ru для проекта learnsongs.ru. С прошлой версией API мы подключали flash-плеер и это не работало на iphone. Сейчас плеер вставляется через iframe и ролики прекрасно играются и со смартфонов.
В виде добавим код html:
<div id="container"> <input type="hidden" id="encodedStr" value="<?php echo $model->title;?>+<?php echo $model->artist1->name;?>"/> <ul class="inline" id="results"></ul> </div>
ненумерованный список ul будем заполнять при помощи jQuery. Скрытый input с id="encodedStr" пишем для задания значения для поиска. Наш js-скрипт будет брать значение из его параметра value и передавать на API youtube для поиска релевантных видео.
Вот содержимое нашего файла script.js, в котором и происходит вся магия. Чтобы это заработало, не забудьте подключить его - либо в шаблоне, либо в виде, либо в контроллере (смотря как это у вас в проекте организовано). Также не забудьте подключить jquery, в Yii и Yii2 он включен, но проверьте что это так.
var vidWidth = 420; var vidHeight = 236; var vidResults = 2; $(document).ready(function(){ var searchText = $('#encodedStr').val(); $.get( "https://www.googleapis.com/youtube/v3/search",{ part: 'id,snippet', q: searchText, maxResults: vidResults, key: 'XXXXXyourYoutubeAPIKey'}, function(data){ var output; $.each(data.items, function(i, item){ console.log(item); videTitle = item.snippet.title; videoId = item.id.videoId; output = '<li><iframe frameborder="0" height="'+vidHeight+'" width="'+vidWidth+'" src=\"//www.youtube.com/embed/'+videoId+'\"></iframe><p style=\"width:420px;\">'+videTitle+'</p></li>'; //Append to results listStyleType $('#results').append(output); }) } ); //} });
Обратите внимание на параметр key. Его нужно создать в API - https://console.developers.google.com, добавив проект и подтвердив права на сайт. Без этого не получится работать с API. Соответственно понадобится аккаунт в Google.
Помогло:
1) документация Youtube Data API Search;
2) замечательный видеоурок от Brad Traversy по внедрению показа роликов из определённого канала на сайте. Пошаговое внедрение роликов на сайт. Тут немного по-другому устроен скрипт - он ищет конкретный канал и выводит видео из него.
24 ноября 2015, Программирование, веб-кодинг

