load next xml element on click via ajax and jquery

I need to be able to cycle through an xml file using a click function. When the page loads I want only 1 xml element to load and then using a click function load the next. Kind of like content slider but loads each one when requested. I'm using it to display a you tube video with a title.

Here's my code...

$(document).ready(function(){ 
$.ajax({
type: "GET",
    url: "video.xml",
    dataType: "xml",
    success: function(xml) {
        $(xml).find('video').each(function(){
            var title = $(this).find('title').text();
            var embed = $(this).find('embed').text();
            $('<div class="video"></div>').html('<iframe width="300" height="200" src="http://www.youtube.com/embed/'+embed+' frameborder="0"></iframe><h2>'+title+'</h2>').appendTo('#video_block');
        });
    }
});
});

Here is the xml code:

<video>
<title>Title 1 here</title>
<embed>FScJfrh80UY</embed>
</video>

<video>
<title>Title 2 here</title>
<embed>FScJfrh80UY</embed>
</video>

Many thanks for any help.

EDIT

Here is my current code now - it needed a slight couple of tweaks because of some errors...

$(document).ready(function(){ 
var i = 0;
getVid();
$('#prev').bind('click', function() {
i--;
getVid();
$('.video').remove()    
return false;

})
$('#next').bind('click', function() {
i++;
getVid();
$('.video').remove()
return false;

})
function getVid() {
$.ajax({
type: "GET",
    url: "video.xml",
    dataType: "xml",
    success: function(xml) {
        oVid = $(xml).find('video:eq('+i+')');
        var title = oVid.find('title').text();
        var embed = oVid.find('embed').text();
            $('<div class="video"></div>').html('<iframe width="300" height="200" src="http://www.youtube.com/embed/'+embed+'" frameborder="0"></iframe><h2>'+title+'</h2>').appendTo('#video_block');
    }
});
}
});

It kind of works but the following problems exist:

• It needs to show the first xml element by default - it currently shows nothing. ***I know have this working. Put getVid() before the click event functions!
• When you hit "next" for the first time it starts on the 2nd xml element.
• When you hit "next" on the last element it needs to go back to the first. Currently it tries to find a next element but comes back with nothing (as nothing exists obviously after 开发者_运维百科the last!)

Many thanks again!!!!!

var i = 0;

$('#prev').bind('click', function() {
    i--;
    getVid();
}
$('#next').bind('click', function() {
    i++;
    getVid();
}
function getVid() {
    $.ajax({
        type: "GET",
        url: "video.xml",
        dataType: "xml",
        success: function(xml) {
            oVid = $(xml).find('video:eq('+i+')');
            var title = oVid.find('title').text();
            var embed = oVid.find('embed').text();
            $('#videoDiv').html('<iframe width="300" height="200" src="http://www.youtube.com/embed/'+embed+' frameborder="0"></iframe><h2>'+title+'</h2>');
        }
    });
});

This code will probably not directly work but It's an idea. Play with it and you'll get it going.

edit

I forgot to increase i, that's why the click event didn't work!

edit2

If you make a button with id 'prev' and a button with id 'next' the above edited code should work.