Fetch the first youtube video via json jquery and display it as a teaser
<p>I have a need to pull out the first video as a teaser display from the code below:</p>

<pre><code>$.getJSON('http://gdata.youtube.com/feeds/api/videos?q=love&amp;alt=json-in-script&amp;callback=?&amp;max-results=3&amp;start-index=1', function(data) {
    $.each(data.feed.entry, function(i, item) {
    var title = item['title']['$t'];
    var video = item['id']['$t'];
    // I need a variable to store the first video ID from the array here which will be manipulated via php later
    //var videoID1 = ?;

    video = video.replace('http://gdata.youtube.com/feeds/api/videos/','http://www.youtube.com/watch?v=');  //replacement of link
    videoID = video.replace('http://www.youtube.com/watch?v=',''); // removing link and getting the video ID
    $('#videonavs .navs').append('&lt;li&gt;&lt;a href="'+video+'"&gt; '+title+' -'+videoID+ '&lt;/a&gt;&lt;/li&gt;'); // 
    });
});
</code></pre>

<p>And HTML:</p>

<pre><code>&lt;div id="videos"&gt;
        &lt;object width="286" height="210"&gt;
          &lt;param value="http://www.youtube.com/v/[this should be first video ID/ videoID1 which is manipulated via php]&amp;amp;feature=youtube_gdata&amp;amp;hl=en_US&amp;amp;fs=1&amp;amp;rel=0" name="movie"&gt;

          &lt;param value="true" name="allowFullScreen"&gt;

          &lt;param value="always" name="allowscriptaccess"&gt;

        &lt;/object&gt;
&lt;/div&gt;      
&lt;div id="videonavs"&gt;&lt;ul class="navs"&gt;&lt;/ul&gt;&lt;/div&gt;
</code></pre>

<p>This is the json if I place a callback "showMyVideos".</p>

<p><a href="http://gdata.youtube.com/feeds/api/videos?q=love&amp;alt=json-in-script&amp;callback=showMyVideos&amp;max-results=3&amp;start-index=1" rel="nofollow">http://gdata.youtube.com/feeds/api/videos?q=love&amp;alt=json-in-script&amp;callback=showMyVideos&amp;max-results=3&amp;start-index=1</a></p>

<p>Any hints would be very much appreciated. Thanks</p>
