Modern Styled Player

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Styled Player</title>
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            background: #e0e0e0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .video-container {
            position: relative;
            width: 70%;
            max-width: 900px;
            border-radius: 20px;
            overflow: hidden;
            background: #000;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        }
        video {
            width: 100%;
            border-radius: 20px;
        }
        .controls {
            position: absolute;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: rgba(0, 0, 0, 0.7);
            padding: 15px;
            border-bottom-left-radius: 20px;
            border-bottom-right-radius: 20px;
        }
        .controls button {
            background: none;
            border: none;
            color: #fff;
            font-size: 24px;
            cursor: pointer;
            margin: 0 5px;
        }
        .controls button:hover {
            color: #03a9f4;
        }
        .play-pause {
            font-size: 36px;
        }
        .progress-container {
            flex-grow: 1;
            margin: 0 10px;
        }
        .progress {
            width: 100%;
            height: 6px;
            background: #555;
            cursor: pointer;
            border-radius: 3px;
            overflow: hidden;
        }
        .progress-filled {
            width: 0;
            height: 100%;
            background: #03a9f4;
            transition: width 0.2s;
        }
        .timestamp {
            color: #fff;
            font-size: 14px;
            margin-right: 30px;
        }
    </style>
</head>
<body>
    <div class="video-container">
        <video id="video" src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
        <div class="controls">
            <button id="play-pause" class="play-pause">▶️</button>
            <div class="progress-container">
                <div class="progress">
                    <div class="progress-filled"></div>
                </div>
            </div>
            <button id="volume-toggle">🔊</button>
            <div class="timestamp" id="timestamp">00:00</div>
        </div>
    </div>
    <script>
        const video = document.getElementById('video');
        const playPauseButton = document.getElementById('play-pause');
        const volumeToggleButton = document.getElementById('volume-toggle');
        const progress = document.querySelector('.progress');
        const progressFilled = document.querySelector('.progress-filled');
        const timestamp = document.getElementById('timestamp');
        playPauseButton.addEventListener('click', togglePlayPause);
        video.addEventListener('click', togglePlayPause);
        video.addEventListener('timeupdate', updateProgress);
        progress.addEventListener('click', setProgress);
        volumeToggleButton.addEventListener('click', toggleVolume);
        function togglePlayPause() {
            if (video.paused) {
                video.play();
                playPauseButton.textContent = '⏸️';
            } else {
                video.pause();
                playPauseButton.textContent = '▶️';
            }
        }
        function toggleVolume() {
            video.muted = !video.muted;
            volumeToggleButton.textContent = video.muted ? '🔇' : '🔊';
        }
        function updateProgress() {
            const progressPercent = (video.currentTime / video.duration) * 100;
            progressFilled.style.width = `${progressPercent}%`;
            const minutes = Math.floor(video.currentTime / 60);
            const seconds = Math.floor(video.currentTime % 60);
            timestamp.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
        }
        function setProgress(e) {
            const newTime = (e.offsetX / progress.offsetWidth) * video.duration;
            video.currentTime = newTime;
        }
    </script>
</body>
</html>

Modern Styled Player - MeggiTools