W3Context Online Editor v1.1

<!DOCTYPE html>
<html>
<head>
    <title>HTML video tag example</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
                /* Default styles for the video (mobile first) */
                video {
                    width: 50%; /* Makes the video 25% width of its container */
                    height: auto; /* Maintains aspect ratio */
                }
                @media screen and (min-width: 400px) {
                    video {
                        width: 75%;
                        margin: 0 auto; /* Center the video if needed */
                        display: block;
                    }
                }
                /* screens wider than 1000px (large desktops) */
                @media screen and (min-width: 1000px) {
                    video {
                        width: 100%;
                    }
                }
                
                .mydiv {
                    border: 2px solid black;
                    padding: 30px;
                    background: rgb(100, 100, 100, 0.3);
                    margin: 20px 0px;
                }
                input[type='submit'] {
                    width: 120px;
                    margin: 10px 0px;
                    padding: 10px 20px;
                    border-radius: 5px;
                    background-color: #000;
                    color: white;
                    text-align: center;
                }
                input[type='submit']:hover {
                    background-color: #f6f6f6;
                    color: #000;
                }
    </style>
</head>
<body>
    <div id="div2" class="mydiv">
        <h3>HTML video tag example</h3>
        <p>The HTML video tag is used to include and play video files on a webpage.</p>
        <video id="myvideo" controls autoplay muted width="450">
            <source
                src="resources/media/seaside.mp4"
                type="video/mp4">
            This browser does not support the video tag.
        </video><br><br>
        <input id="loop" type="submit" value="Loop" onclick="toggleLoop()">
        <input id="play" type="submit" value="Play" onclick="playpause()">
        <input type="submit" value="Stop" onclick="videoStop()">
    </div>
</body>
<script>
            //for video
            let myvideo = document.getElementById("myvideo");
            let buttonLoop = document.getElementById("loop");
            let buttonPlay = document.getElementById("play");
            function toggleLoop() {
                if (myvideo.loop) {
                    myvideo.loop = false;
                    buttonLoop.value = "Loop Stopped";
                } else {
                    myvideo.loop = true;
                    buttonLoop.value = "Loop Running";
                }
            }
            function playpause() {
                if (myvideo.paused) {
                    myvideo.play();
                    buttonPlay.value = "Pause"
                } else if (myvideo.play) {
                    myvideo.pause();
                    buttonPlay.value = "Play";
                }
            }
            function videoStop() {
                myvideo.pause();
                myvideo.currentTime = 0;
                buttonPlay.value = "Play";
            }
                        </script>
</html>