إضافة بحث فيديوهات اليوتيوب المتطور اللحظى لتدويناتك أو لمدونتك

طبعا موقع الفيديوهات الشهير والذى نستخدمه جميعنا سواء لرفع الفيديوهات أو للإستمتاع بالمشاهده عليه, عند تصفحنا اى موقع وأردنا بالذهاب لليوتيوب لمشاهدة فيديو سنضطر لفتح صفحه جديده والذهاب من خلالها لموقع اليوتيوب ثم نقوم بعمل البحث الذى نريده.

الآن يستطيع الزائر وتستطيع أنت أيضا البحث عن الفيديو الذى تريده من موقع اليوتيوب ومشاهدته فورا من على مدونتك دون المغادره وبشكل جذاب جدا وسريع جدا.

كل ما علينا القيام به هو إضافة بعض الأكود بطريقه سهله جدا.

المرحله الاولى : نذهب إلى تحرير HTML الخاص بقالب المدونه ونقم بالبحث عن هذا السطر :

</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_title=data.title;
            var video_viewCount=data.viewCount;
            var video_frame="<iframe width='500' height='300' src='http://www.youtube.com/embed/"+video_id+"' frameborder='0' type='text/html'></iframe>";
            var final="<div id='title'>"+video_title+"</div><div>"+video_frame+"</div><div id='count'>"+video_viewCount+" Views</div>";
            $("#result").html(final);
          });
        } else {
          $("#result").html("<div id='no'>No Video</div>");
        }
      }
    });
  });
});
//]]>
</script>

<style>
  /* el DIV donde colocamos el buscador */
  #input_box {
    text-align: center;
    width:500px;
  }
  /* el cuadro de búsqueda */
  .search_input {
    font-size: 20px;
    padding: 5px;
    text-align: center;
    width: 400px;
  }
  /* el DIV donde se mostrarán los resultados */
  #result {
    background-color: #000;
    margin-top:25px;
    min-height:380px;
    width:500px;
  }
  /* un texto, sólo visible cuando no hay resultados a mostrar */
  #no { text-align: center; }
  /* el título del video encontrado */
  #title {
    font-size: 18px;
    height: 40px;
    line-height: 1;
    padding-bottom: 10px;
    text-align: center;
  }
  /* el texto inferior con el contador de YouTube */
  #count {
    height: 20px;
    padding-top: 10px;
    text-align: right;
  }
</style>

ثم نحفظ القالب

المرحله الثانيه : وهى وضع الكود التالى فى أى مكان نرغب وضع بحث اليوتيوب فيه على مدونتنا

<div id="input_box">
  <input type="text" class='search_input' />
</div>
<div id="result"></div>

داخل التدوينه : نذهب إلى تعديل HTML الخاص بالتدوينه ونضعه فى المكان الذى نريده.
فى المدونه عموما : نضع الكود فى إضافة HTML/JAVASCRIPT فى المكان الذى نريده.

وإستمتعوا جميعا بموقع اليوتيوب على مدوناتكم وفى تدويناتكم.