Home/ Questions/Q 8163141
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T18:57:15+00:00

So I’ve got this JavaScript array full of fifty YouTube video id’s and a

  • 0

So I’ve got this JavaScript array full of fifty YouTube video id’s and a while loop that writes the first two videos to the DOM. This code is being printed using PHP in case you’re wondering about the backslashes.

<script type="text/javascript">
var videoArr=["id1", "id2", etc.];
var i = 0;
while (i<2) {
document.write(\'<iframe width="400" height="225" src="http://www.youtube.com/embed/  \'+videoArr[i]+\'?rel=0&amp;autohide=1&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>\');
i++;
}
</script>

So basically I need a ‘Previous’ and ‘Next’ button that will cycle through this array and write the next or previous two videos to the DOM. What’s the best way to do this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have declared var i at global scope already, now you only need functions to increment or decrement i and append it to the DOM. Rather than document.write() when the DOM is already loaded, you ought to append them to the <body>.

    // i is at global scope
var i = 0;
function previousVideo() {
   // Only if you're not already at the beginning of the array
   if (i > 0) {
     i--;
     // You tagged this jQuery, so here's the simpler jQuery solution
     appendVideo(i);
    }
}
function nextVideo() {
  // Only if you're not already at the end of the array
  if (i < videoArr.length - 1) {
     i++;
     appendVideo(i);
  }
}
// Appends a new iframe to the <body>
function appendVideo(i) {
   $("body").append('<iframe width="400" height="225" src="http://www.youtube.com/embed/' + videoArr[i] + '?rel=0&amp;autohide=1&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>');
}

    Create some new buttons and bind the functions previousVideo() and nextVideo() to them.

    Edit: I just noticed you want to append two videos each time. In that case, just call the previous & next functions twice per button click. If you read to the ends of the array, only one will be added.

    $('#yourbutton').click(function() {
  // Get rid of the old ones
  $('body').remove('iframe');
  // And write two new ones.
  previousVideo();
  previousVideo();
});
    • 0