Untitled

<!DOCTYPE html>
<html>
<head>
    <title>YouTube Video Player</title>
    <style>
        #video-player {
            width: 640px;
            height: 360px;
            background-color: #000;
            position: relative;
        }

        #video-player video {
            width: 100%;
            height: 100%;
        }

        #controls {
            position: absolute;
            bottom: 0;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            color: #fff;
            padding: 8px;
            display: flex;
            align-items: center;
        }

        #controls button {
            background-color: #fff;
            border: none;
            padding: 5px 8px;
            margin-right: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="video-player">
        <video id="video" controls>
            <source src="your_video_url.mp4" type="video/mp4">
        </video>
        <div id="controls">
            <button id="play-pause">Play</button>
            <button id="stop">Stop</button>
            <input id="volume" type="range" min="0" max="1" step="0.1" value="1">
        </div>
    </div>

    <script>
        const video = document.getElementById("video");
        const playPauseButton = document.getElementById("play-pause");
        const stopButton = document.getElementById("stop");
        const volumeControl = document.getElementById("volume");

        playPauseButton.addEventListener("click", () => {
            if (video.paused || video.ended) {
                video.play();
                playPauseButton.innerHTML = "Pause";
            } else {
                video.pause();
                playPauseButton.innerHTML = "Play";
            }
        });

        stopButton.addEventListener("click", () => {
            video.pause();
            video.currentTime = 0;
            playPauseButton.innerHTML = "Play";
        });

        volumeControl.addEventListener("input", () => {
            video.volume = volumeControl.value;
        });
    </script>
</body>
</html>
Editor is loading...