<div id="campus-container">
  <div class="campus-mobile">
    <div style="padding:56.25% 0 0 0;position:relative;">
      <iframe src="https://player.vimeo.com/video/1000563480?badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="YISS Campus Tour"></iframe>
    </div>
    <script src="https://player.vimeo.com/api/player.js"></script>
  </div>

  <img src="https://images.squarespace-cdn.com/content/v1/62f44b9327abcd601602b107/edeac618-2f32-4f0a-b6b3-7604963787f4/yiss-campus-page.jpg" id="campus-image" alt="School Campus">

  <!-- Hotspots on the campus image -->
  <div class="hotspot" id="spot1" style="top:10%; left:10%;" data-vimeo="0m0s">Welcome <i class="fa-solid fa-up-right-from-square fa-2xs fa-rotate-90"></i></div>
  <div class="hotspot" id="spot2" style="top:52%; left:12%;" data-vimeo="0m23s">Elementary School <i class="fa-solid fa-up-right-from-square fa-2xs fa-rotate-90"></i></div>
  <div class="hotspot" id="spot3" style="top:48%; left:55%;" data-vimeo="1m11s">Middle School <i class="fa-solid fa-up-right-from-square fa-2xs fa-rotate-90"></i></div>
  <div class="hotspot" id="spot4" style="top:50%; left:37%;" data-vimeo="1m40s">High School <i class="fa-solid fa-up-right-from-square fa-2xs fa-rotate-90"></i></div>
  <div class="hotspot" id="spot5" style="top:58%; left:47%;" data-vimeo="2m33s">Cafeteria <i class="fa-solid fa-up-right-from-square fa-2xs"></i></div>
  <div class="hotspot" id="spot6" style="top:46%; left:72%;" data-vimeo="3m1s"><i class="fa-solid fa-up-right-from-square fa-2xs fa-rotate-180"></i> Athletic Building</div>
  <div class="hotspot" id="spot7" style="top:55%; left:80%;" data-vimeo="3m52s"><i class="fa-solid fa-up-right-from-square fa-2xs fa-rotate-270"></i> Auditorium</div>

  <!-- Hotspot list for mobile -->
  <div id="hotspot-list">
    <div>
      <button data-vimeo="0m0s">Welcome <i class="fa-solid fa-up-right-from-square fa-xs"></i></button>
      <p>Discover the welcoming spirit and unique offerings that make YISS a special place for students from around the world.</p>
    </div>
    <div>
      <button data-vimeo="0m23s">Elementary School <i class="fa-solid fa-up-right-from-square fa-xs"></i></button>
      <p>Explore our engaging elementary school environment, where young learners are nurtured and encouraged to grow.</p>
    </div>
    <div>
      <button data-vimeo="1m11s">Middle School <i class="fa-solid fa-up-right-from-square fa-xs"></i></button>
      <p>Take a look at the dynamic middle school experience that supports students' academic and personal development.</p>
    </div>
    <div>
      <button data-vimeo="1m40s">High School <i class="fa-solid fa-up-right-from-square fa-xs"></i></button>
      <p>Dive into the vibrant high school life at YISS, where students prepare for the future with confidence and purpose.</p>
    </div>
    <div>
      <button data-vimeo="2m33s">Cafeteria <i class="fa-solid fa-up-right-from-square fa-xs"></i></button>
      <p>Experience the variety and quality of our cafeteria, where students enjoy nutritious meals in a friendly setting.</p>
    </div>
    <div>
      <button data-vimeo="3m1s">Athletic Building <i class="fa-solid fa-up-right-from-square fa-xs"></i></button>
      <p>Get a glimpse of our athletic facilities, where students stay active and develop teamwork skills.</p>
    </div>
    <div>
      <button data-vimeo="3m52s">Auditorium <i class="fa-solid fa-up-right-from-square fa-xs"></i></button>
      <p>See our impressive auditorium, a space where creativity and community come together for performances and events.</p>
    </div>
  </div>
</div>

<!-- Modal for video playback -->
<div id="videoModal" class="modal">
  <div class="modal-content">
    <span class="close">×</span>
    <div id="vimeoContainer">
      <iframe id="vimeoPlayer" src="" width="100%" height="450" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
    </div>
  </div>
</div>

<script>
  var modal = document.getElementById("videoModal");
  var iframe = document.getElementById("vimeoPlayer");
  var closeBtn = document.getElementsByClassName("close")[0];

  function openModal(vimeoId) {
    iframe.src = "https://player.vimeo.com/video/1000563480?autoplay=1#t=" + vimeoId;
    modal.style.display = "flex";
  }

  closeBtn.onclick = function () {
    modal.style.display = "none";
    iframe.src = "";
  }

  window.onclick = function (event) {
    if (event.target == modal) {
      modal.style.display = "none";
      iframe.src = "";
    }
  }

  var hotspots = document.getElementsByClassName("hotspot");
  for (var i = 0; i < hotspots.length; i++) {
    hotspots[i].onclick = function () {
      var vimeoId = this.getAttribute("data-vimeo");
      openModal(vimeoId);
    }
  }

  var buttons = document.querySelectorAll("#hotspot-list button");
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].onclick = function () {
      var vimeoId = this.getAttribute("data-vimeo");
      openModal(vimeoId);
    }
  }
</script>