JSFiddle - React, Tailwind, and code Playground

by Lucaskazama

HTML

<!DOCTYPE html>
<html>
<head>
  <title>My Video Page</title>
</head>
<body>
  <iframe src="https://www.youtube.com/embed/Qjj_yRPMxp8" width="560" height="315"></iframe>
  <button id="myButton" style="display: none;">Click me after 5 seconds!</button>

  <script src="myScript.js"></script>
</body>
</html>

JavaScript

window.onload = function() {
  // Get the iframe and button elements
  const iframe = document.querySelector('iframe');
  const button = document.querySelector('#myButton');

  // Set a variable to track the time elapsed
  let timeElapsed = 0;

  // Add an event listener to the iframe that fires on "timeupdate"
  iframe.addEventListener('timeupdate', function() {
    // Increase the time elapsed by the time between the last update and the current time
    timeElapsed += this.currentTime - (timeElapsed || 0);

    // If the time elapsed is greater than or equal to 5 seconds and the button is hidden
    if (timeElapsed >= 5 && button.style.display === 'none') {
      // Display the button by setting its style.display property to "block"
      button.style.display = 'block';
    }
  });

  // Add an event listener to the button that logs a message when clicked
  button.addEventListener('click', function() {
    console.log('You clicked the button!');
  });
};