<style>
  .video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
    padding: 10px;
  }
  .video-grid video {
    width: 100%;
    height: auto;
    border-radius: 8px;
    object-fit: cover;
    display: block;
  }
</style>

<div class="video-grid" id="videoGrid"></div>

<script>
  const DROPBOX_TOKEN = "YOUR_ACCESS_TOKEN"; // sl.u.AF5Zw702EE6BGfYCjhZOXifRnKT0ZmJgqEVGe641zZc0OPicfT1LU2bpP1dqhrwOraBUTV1NgWQ8SYiqQ7aVBe-BSUn4j4_NKQtY1sshep-GlRnrwYTCNr-0wfI0klYnDtiB0MfbwfJuKzXwZDcfeYPVwN13XncUXE3y9JWrNhXcxVbUsCWVZtAJi4qOkrNhi6moGJz1uRX7hfWOWQ6OQ2MiZa-c3AC1hJ3bvxxkyeBchWG_ZFh2zdxS4D063eWuH9GNZVyLtE3Jf3b_W8hCNHNTVeC6jB9Ophsb36OyG3HF_VX2z4iFuXFf9YxzYcAxPugb4AsCWe8jdTVwZhpzni30ur_NSDkWHqNr7t06WwbSrJT8koplqH5yczaO0ZVq65QS-IPjWO1wzEOBi24rNXo-AeqV1Z9vNx5Lipvt01UTze4vg389uX0KI3bHayugJrPKimCE7-e_qQyf-t3JQnVtEbkzdL57i_dP7P5p40ll_mqJ7BAzWhmmyQO4eaeSOdKmqsBUZiQPPPofTDsU3w5I6ijCA2Vcg_Ox6VxkC7gMYh_RLGRyTrsF7lU6REVnAI2_RDXJbYPpqYue77q0rlkZHbrCcD3MxC-PHEMN6Bvfx0DT3c5V-5muntdamh5e3QuXkRt8O4zFwZJ5ZWoBjmjG-tn8_VopIL68UkhjLhc1R2dTZbnJfHuIoN8g3emk3ItQj3v13lhbFsTYCsmbpoTzJ4EeW77vhFlQoeBiRGhgSBC82OIlXB8bJmYwH5iiyc7fS2J5wB_ckfYYx7alVzTyZMo9LML5sXab0YGawQGb87vbJwbPf-OT5DMVoCuBtsYDLL6U6PnWrg0Yme-YGLnbXYSzcneW7C0xj8SwGhWuL5qRaGnp-UX0gzvW7hP1MtskYrAfnW8ecjaa6r6gCQsp22aBOht9k2oXs0j9RDGZRtDCCqea271N0h1bN9rPXh0so0_cErzOauQV7qQRkJdkAZx2tKcGUH1mQPyAasxrLNoYIvnwCwdctW-TUfszlNY6iSTMJGuhUTt7Pm81P3t5C0QFw98840RN7ZpHCxjGMNJaenVDH9xEIsSUBl1kA4_nPWaAtzSxHjyG5LXyTozC4609zj9la3rs3O6EIwbx4934RXooo2TwHXc2mjQgqtKK8DuIvSHvBU2fk4IhuQ7czSmNizHqed9eWy-F1x_FkUHhkRWvjUPJ6u4aAKMSqlOOBtQUViTPunaWS_ZdPim1n_BFJKZeuhufTHNM4b9J-hsFhV7qopn6-M0nLfRGdSLgF7KIXlbNOKe8kLj4ZFsptXb4dOzYOy8ECH-iTLVA5G4nCy8J0Cyfs6Sym5sc5NLbYpl5uc8rb507kcZFaoD5
  const DROPBOX_PATH = "/website-videos"; // Movies (DROPBOX)/WEBSITE VIDEOS

  async function fetchVideos() {
    const response = await fetch("https://api.dropboxapi.com/2/files/list_folder", {
      method: "POST",
      headers: {
        "Authorization": `Bearer ${DROPBOX_TOKEN}`,
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        path: DROPBOX_PATH,
        recursive: false
      })
    });

    const data = await response.json();
    if (!data.entries) return [];

    // Filter MP4 files only
    const mp4Files = data.entries.filter(file => file.name.toLowerCase().endsWith(".mp4"));

    // Get temporary public links for each file
    const links = await Promise.all(mp4Files.map(async file => {
      const linkResp = await fetch("https://api.dropboxapi.com/2/files/get_temporary_link", {
        method: "POST",
        headers: {
          "Authorization": `Bearer ${DROPBOX_TOKEN}`,
          "Content-Type": "application/json"
        },
        body: JSON.stringify({ path: file.path_lower })
      });
      const linkData = await linkResp.json();
      return linkData.link;
    }));

    return links;
  }

  function shuffleArray(array) {
    return array.sort(() => Math.random() - 0.5);
  }

  function displayVideos(links) {
    const container = document.getElementById("videoGrid");
    shuffleArray(links).forEach(url => {
      const video = document.createElement("video");
      video.setAttribute("autoplay", "");
      video.setAttribute("loop", "");
      video.setAttribute("muted", "");
      video.setAttribute("playsinline", "");
      video.setAttribute("preload", "none");

      const source = document.createElement("source");
      source.src = url;
      source.type = "video/mp4";

      video.appendChild(source);
      container.appendChild(video);
    });
  }

  fetchVideos().then(displayVideos);
</script>