HTML Iframe Selection

I want to change the gallery images to iframes to be able to display 360 degrees images.
If one of the preview iframes is selected, i want it to appear in big in the highlight frame.
I created a code which works just fine for usual images, but i want to use the 360 degree images instead. What do i have to change to make it work?

This is my JAVASCRIPT-Code for the images, i want the images to be swapped to iframes

 function imageGallery(){
    const highlight = document.querySelector('.gallery-highlight2');
    const previews = document.querySelectorAll('.room-preview2 img');

    previews.forEach(preview => {
      preview.addEventListener("click", function(){
        const smallSrc = this.src;
        const bigSrc = smallSrc.replace("small", "big");
        highlight.src = bigSrc;
        previews.forEach(preview => preview.classList.remove("room-active2"));
        preview.classList.add("room-active2");
      });
    });
  }

  imageGallery();

This is my HTML-Code:

<div class="col-md-8">
        <div class="room-gallery2">
          <img src="img/wohnung/wohnzimmer/wohnzimmer_1.jpg" class="gallery-highlight2" alt="Foto Groß">
      <div class="room-preview2">
        <img src="img/wohnung/wohnzimmer/wohnzimmer_1.jpg" class="room-active2" alt="Foto 1">
        <img src="img/wohnung/wohnzimmer/wohnzimmer_2.jpg" alt="Foto 2">
        <img src="img/wohnung/wohnzimmer/wohnzimmer_3.jpg" alt="Foto 3">
        <img src="img/wohnung/wohnzimmer/wohnzimmer_4.jpg" alt="Foto 4">
      </div>
    </div>
  </div>