Not all elements are being replaced

I’m having issues replacing iframes with text about each iframe. Here’s an example below:

// once
console.log(document.getElementsByTagName("iframe").length)
for (let iframe of document.getElementsByTagName("iframe")) {
  iframe.replaceWith(`"${iframe.title}": ${iframe.src}`)
}

// twice
console.log(document.getElementsByTagName("iframe").length)
for (let iframe of document.getElementsByTagName("iframe")) {
  iframe.replaceWith(`"${iframe.title}": ${iframe.src}`)
}

// thrice
console.log(document.getElementsByTagName("iframe").length)
for (let iframe of document.getElementsByTagName("iframe")) {
  iframe.replaceWith(`"${iframe.title}": ${iframe.src}`)
}
console.log(document.getElementsByTagName("iframe").length)
<iframe width="560" height="315" src="https://www.youtube.com/embed/AW8OOp2undg?si=GSgNE9ERhGMkX_o4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/AW8OOp2undg?si=GSgNE9ERhGMkX_o4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/AW8OOp2undg?si=GSgNE9ERhGMkX_o4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/AW8OOp2undg?si=GSgNE9ERhGMkX_o4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/AW8OOp2undg?si=GSgNE9ERhGMkX_o4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/AW8OOp2undg?si=GSgNE9ERhGMkX_o4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/AW8OOp2undg?si=GSgNE9ERhGMkX_o4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>

As shown in the console, we begin with 7 iframes, which goes down to 3, then 1, and finally 0. Why isn’t the first for-loop replacing all the iframes? Am I doing something wrong?