<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Video Player</title>
<link rel="stylesheet" href="style.css" />

</head>
<body>
<main class="video-app">
  <h1>Custom Video Player</h1>
  <div class="video-wrapper">
    <video id="video" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" poster="" preload="metadata"></video>
    <div class="controls">
      <button id="play">▶</button>
      <input id="progress" type="range" value="0" min="0" step="0.1" />
      <span id="time">0:00 / 0:00</span>
      <input id="volume" type="range" min="0" max="1" step="0.05" value="0.8" />
      <button id="fs">⛶</button>
    </div>
  </div>
</main>
<script src="script.js"></script>
</body>
</html>