Поиск youtube.com на сайте

• Несколько роликов YouTube на сайте, скрипт
• Как с Ютюб вытянуть картинку?
• Как перевести Ютуб на русский
• Видео по ширине окна браузера

Скрипт на JQuery, который добавляет поиск видео YouTube на сайт, предложен на http://www.9lessons.info/.

Перед </head> написать:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
  $(".search_input").focus();
  $(".search_input").keyup(function() {
    var search_input = $(this).val();
    var keyword= encodeURIComponent(search_input);
    var yt_url='http://gdata.youtube.com/feeds/api/videos?q='+keyword+'&format=5&max-results=1&v=2&alt=jsonc'; 
    $.ajax({
      type: "GET",
      url: yt_url,
      dataType:"jsonp",
      success: function(response){
        if(response.data.items){
          $.each(response.data.items, function(i,data){
            var video_id=data.id;
            var video_viewCount=data.viewCount;
            var video_frame="<iframe src='http://www.youtube.com/embed/"+video_id+"' frameborder='0'></iframe>";
            var final="<div>"+video_frame+"</div><div>"+video_viewCount+" показов</div>";
            $("#result").html(final);
          });
        } else {
          $("#result").html("Видео по запросу не найдено");
        }
      }
    });
  });
});
//]]>
</script>

Поскольку данный скрипт основан на фиде ютуба (подробнее), то скорректировав фрагмент

http://gdata.youtube.com/feeds/api/videos?q='+keyword+'&format=5&max-results=1&v=2&alt=jsonc

можно немного управлять результатом поиска. Например, только RSS пользователя NMitra:

http://gdata.youtube.com/feeds/api/videos?q='+keyword+'&format=5&max-results=1&v=2&alt=jsonc&author=NMitra

В том месте, где хотим видеть форму поиска внести

<input class="search_input" placeholder="поиск видео YouTube" type="text"  onsubmit="return false;"/><div id="result"><img height="300" width="300" src="http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyt2ZKd9l_0CIeLxkgJeoDQNi9wrUr2xRh6l-FsbjMzFiBlW9an1JYRIxWBPN4IHOvP5lyZhkr_eCuHIzbxv3mUdK-UNzAifh-ydu4nXTHkUBT6vjB9vvoC3WjrEogoG1JWURJCgiGlCYi/s0/ytinstantsearch2.png" alt="поиск по ютуб"/></div>

И, последнее, код CSS (пользователи Blogger его добавляют перед ]]></b:skin>)

.search_input { /* поле для ввода */ 
  text-align: center;
  width: 80%;
  margin: 5px auto;
  display: block; 
  padding: 5px;
  border-radius: 5px;
  font-size: 20px;
}

#result { /* результат поиска */
  text-align: center;
}

#result div:nth-child(1) { 
  position: relative;
  padding-top: 56.25%;
}

#result iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#result div:nth-child(2) { /* количество показов */
  text-align: right;
}