Поиск по Youtube с выдачей результатов и плеером

В комментариях к статье Как установить поиск роликов на Youtube читатель спрашивал, можно ли такой поиск сделать с выдачей нескольких результатов, а не одного.
Как вариант, есть неплохой скрипт ytembed.js
В своём первоначальном виде результаты довольно просто выглядят, но легко обрабатываются через CSS и сами настройки скрипта.

Демо (скриншоты):
Поисковая форма + выдача нескольких результатов с кнопками Предыдущие/Следующие. Выбранный ролик с Youtube проигрывается тут же в плеере.

youtube search
Поисковый запрос ролика Youtube

youtube search results
Выбор ролика Youtube

Живое демо можете посмотреть на тестовом блоге (скриншоты не вмещают всю выдачу результатов поиска)

Установка.
На статическую страницу в HTML режиме редактора копируются по очереди:

1) Ссылка на скрипт:
<script src="http://planeta.omg-linux.ru/docs/ytembed.js" type="text/javascript"></script>
Желательно использовать собственный хостинг.

2) Код поисковой формы:
<form onsubmit="ytEmbed.init({'block':'youtubeDivSearch','type':'search','q':document.getElementById('ytSearchField').value,'results': 5,'order':'most_relevance'}); return false;">
<input  type="text" id="ytSearchField">  <input type="submit" class="button" value="Поиск">
</form>
Настройки:
results': 5 - кол-во результатов поиска на странице
'order':'most_relevance' - сортировка по самым запрашиваемым
Если добавить параметр 'layout':'thumbnails' (после order), то выводится будут только картинки (thumbnails) без описания и рейтинга.

3) Контейнер:
<div id="youtubeDivSearch"></div>

4) Стили к поисковой форме:
<style>
.button  {
    border: 1px solid #555555;
    border-radius: 25px 5px 5px 10px;
    color: #888888;
    height:20px;
    width:100px;
    font-size:10px;
    color: #FFF;
    background: rgb(109, 163, 189);
    border: 1px solid rgb(109, 163, 189);
    cursor:pointer;}
#ytSearchField  {
    float:left; 
    height:20px; 
    width:180px;
    border: 1px solid rgb(109, 163, 189);
    border-radius: 5px 8px 25px 5px;
    color: #888888; 
    font-size:10px;}

ul li {
list-style: none;
}
</style>
Здесь я накидал привычный мне вид формы:
.button - внешний вид кнопки
#ytSearchField - поле ввода запроса

Результаты поиска выводятся в виде таблицы. Её настройки можно подкрутить прямо в скрипте.

Разработчик: www.yvoschaap.com

14 комментариев:

  1. Конечно же Огромное Человеческое Спасибо.
    Все работает нормально.
    Единственное,что когда нажимаешь на видео,он запускается в начале,а это посетители могут и не заметить.
    С уважением Рузанна

    ОтветитьУдалить
  2. Прими участие в моем марафоне))

    ОтветитьУдалить
  3. Дамир, нафига ссылку оставляешь на закрытый профиль? Лучше оставляй прямо на свой блог, мало ли кто захочет перейти по ней - лишний кусочек трафика всё-таки :-).

    ОтветитьУдалить
  4. @aldous
    Закрытый потому, что там много блогов, которых я забросил. И мне не удобен этот вид комментариев. Комментировать даже не хочется из-за этого. Обожаю у кого Дискус))

    ОтветитьУдалить
  5. У меня аналогичная ситуация. Только закрыт, потому что там чужие блоги.
    Дискус - нееет. Не хочу, чтобы снились сны, как дискус упал и сделал официальное заявление, что просрали все комментарии от такого-то числа=).

    ОтветитьУдалить
  6. А не знаете в чем проблема - по русски не ищет. Файл ytembed.js залил к себе на хостинг, может поэтому п и не фурычит. Кто знает как исправить ошибку?

    ОтветитьУдалить
  7. У меня ищет по-русски. См. исходник страницы демки на тестовом блоге.

    ОтветитьУдалить
  8. У меня по русский не ищет помогите!

    ОтветитьУдалить
  9. Посмотрите исходник демо, возможно многие вопросы отпадут. У меня ищет по-русски.

    ОтветитьУдалить
  10. Кто пожалуйста подскажет как можно в скрипте уменьшить размер картинок, выданных после результата поиска. Размер плеера я уменьшил, а вот картинок не выходит. Спасибо.

    ОтветитьУдалить
  11. ...или хотя бы сделать так, чтоб название и описание ролика выводилось или под ним, или над ним. Но чтоб не слева, или справа.

    ОтветитьУдалить
  12. Копайте скрипт ytembed.js.
    Вероятно, это строки:
    this.cfg.height = 390;
    this.cfg.width = 640
    .

    ОтветитьУдалить
  13. this.cfg.height = 390;
    this.cfg.width = 640.
    Эти строки, это размер плеера. Спасибо, но мне уже не надо. Я удалил на сайте левый контейнер, его содержимое перед этим перенёс в правый. И теперь у меня всё ок. Описание материалов естественно уже не накладывается на содержимое сайта. Ну и плеер пришлось теперь увеличивать, так как сайт стал шире.

    ОтветитьУдалить