Rock the Data!

// List of video URLs const videoList = [ “https://youtu.be/7ebg7lsZY9o”, “https://youtu.be/7ebg7lsZY9o&t=60”, “https://youtu.be/7ebg7lsZY9o?t=120” ]; // Function to change video function changeVideo() { const frame = document.getElementById(“video-frame”); const randomIndex = Math.floor(Math.random() * videoList.length); frame.src = videoList[randomIndex]; } // Change video every 10 seconds (optional) //setInterval(changeVideo, 10000);

<!-- The Main Video Iframe -->
https://youtube.com

<!-- The Clickable Buttons -->
<div class="video-controls">
  <button class="embed-btn" data-id="dQw4w9WgXcQ">Rick Astley</button>
  <button class="embed-btn" data-id="9bZkp7q19f0">PSY - Gangnam Style</button>
</div>

// Select the iframe element
const videoIframe = document.getElementById('featured-video');
// Select all buttons
const embedButtons = document.querySelectorAll('.embed-btn');

embedButtons.forEach(button => {
  button.addEventListener('click', function() {
    // Get the unique YouTube ID
    const videoId = this.getAttribute('data-id');
    
    // Construct the new URL (adding ?autoplay=1 is optional)
    videoIframe.src = `https://youtube.com{videoId}?autoplay=1`;
  });
});