I'm currently trying to write a script that will mute/pause video offscreen and play/unmute the ones on screen. The Ids of the different videos are mutable 1, mutable 2 etc.

In the code below I start of by getting the nodelist of all the ids beginning with mutable and change that into an array equal to the global variable 'nodelistToArray' when the page loads.

var nodelistToArray;
window.addEventListener('load', function() {
  nodelistToArray = [document.querySelectorAll('*[id^="mutable"]')];
})

Then I have a new function that runs when the user scrolls. Firstly I use .map to log all the values of the arrray into the console, this works fine. It logs this:

NodeList(2)
0:video#mutable1
1:video#mutable2

but then when I try to use getBoundingClientRect on each of the elements in the array it gives the error 'el.getBoundingClientRect' is not a function.

document.addEventListener('scroll', function() {
  nodelistToArray.map(el => console.log(el))
  nodelistToArray.map(el => el.getBoundingClientRect());

I have also tried doing getBoundingClientRect on just one query selector on its own and it works fine.