Monday, September 15, 2014

Youtube Instant Search Using jQuery and Ajax

Youtube instant search is useful to search youtube videos fastly.


Live DemoDownload Script




We need jquery libraya nad plugin files to perform this action.Please copy and Paste below library file.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="youtube-jquery.js"></script>

Jquery function

<script type="text/javascript">
            $(document).ready(function() {
            $("#utubesearch").keyup(function() {
            var v_text = $.trim($("#utubesearch").val());
            $('#video_loader').YoutubeVideo({
                feedurl:'http://gdata.youtube.com/feeds/api/videos?q='+v_text+'&v=2&format=5&alt=jsonc', // your rss feed url here...
                count:'5', // total no of videos
                height:'259', //video height
                width:'450', //video width
                loadingtext:'fetching videos from youtube' //loading text...
            });
            });
            });

            function watermark(inputId,text){
              var inputBox = document.getElementById(inputId);
                if (inputBox.value.length > 0){
                  if (inputBox.value == text)
                    inputBox.value = '';
                }
                else
                  inputBox.value = text;
            }
        </script>

HTML

<input type="text" id="utubesearch" value="Type your video name here" onfocus="watermark('utubesearch','Type your video name here');" onblur="watermark('utubesearch','Type your video name here');"  />

Please share your comments and feedback.Thanks.Please subscribe my updates via email.

No comments:

Post a Comment