Интернет развивается с неугомонной скоростью, каждый день можно встретить новые сайты, среди них пользуются популярностью видео сайты. Но создавая такой сайт можно столкнуться с такой проблемой как нехватка места на дисковом пространстве хостинга, по этому придется хранить свои видео-файлы на других, более крупных сайтах. В данном уроке мы рассмотрим как создать поиск видео с популярно сервиса YouTube на своем сайте. YouTube — широко известный сайт для хранения видео, на котором пользователи могут загружать, просматривать и показывать всем свои ролики.

Для создания нам понадобиться tubeutil.js — плагин jQuery. Автор которого, известный разработчик Nirvana Tikku. Плагин jQTubeUtil является оболочкой для YouTube GDATA API. GDATA API поддерживает запросы JSON, для которых в плагине используется jQuery. Плагин строит URLы для обеспечения взаимодействия поиска и результатов.

Возможности плагина:

  • поиск по YouTube с использованием ключевого слова
  • поиск по стандартным фидам YouTube
  • выбор заданного видео на YouTube
  • используется автозаполнение для YouTube

Плагин работает очень быстро и может интегрировать поиск по YouTube в любой сайт. Прежде, чем начать, вам нужен ключ YouTube API для разработчиков. Просто получите его на странице YouTube API.

Теперь рассмотрим структуру HTML, все достаточно просто и не должно вызвать никаких сложностей:

Класс reset добавлен к неупорядоченным спискам только для сброса стилей.

Теперь рассмотрим правила CSS которые будут использоваться для создания формы поиска.

Теперь рассмотрим jQuery. Сначала нужно инициализировать jQTubeUtil чтобы делать запросы к YouTube.

Затем создаем функцию, которая будет показывать результаты. Называться она будет show_videos():

Теперь создаем функцию автозаполнения поля поиска:

Последний штрих. Создаем обработчики события click для элемента ‘.btn’ и ссылки в элементе ‘.autocomplete’:

Окончательный вид файла init.js будет таким:

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.