I have an array of files, and want to display only one based on the detected screen width.
I'm having trouble trying to loop through and check against both the current item in the array and the next one.

Here are some requirements:

* If `viewportWidth` is **greater than or equal to** the largest video width, then choose the largest video.
* If `viewportWidth` is **less than or equal to** the smallest video width, then choose the smallest video
* Otherwise, loop through the array and if `viewportWidth` is **smaller than the current item but larger than the next one**, then choose that video.

Here's my current code but I can't seem to get the looping/conditions part right:

```js
const viewportWidth = 1800;
const videos = [{
    url: 'video1.mp4',
    width: 1920
  },
  {
    url: 'video2.mp4',
    width: 1280
  },
  {
    url: 'video3.mp4',
    width: 720
  },
  {
    url: 'video4.mp4',
    width: 560
  },
  {
    url: 'video5.mp4',
    width: 420
  },
];

function getVideoUrl(viewportWidth) {
  if (viewportWidth > videos[0].width) {
    return videos[0].url;
  }

  if (viewportWidth < videos[videos.length - 1].width) {
    return videos[videos.length - 1].url;
  } else {
    let i = 0;
    while (viewportWidth < videos[i].width && viewportWidth > videos[i + 1].width) {
      i++
    }
    return videos[i].url;
  }
}

const videoUrl = getVideoUrl(viewportWidth);

console.log(videoUrl);
```

Based on the above:

```
viewWidth = 1200 // should output video2.mp4
viewWidth = 2000 // should output video1.mp4
vewWidth = 300 // should output video5.mp4

```