Автоматический поиск и вставка на сайте роликов из Youtube с помощью Youtube Data API v3 и jQuery для Yii и Yii2

В версии 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, Программирование, веб-кодинг