How to Play Video on Mouse Hover and Pause on Mouseout using JavaScript?

Last Updated : 12 Mar, 2025

In this article, we learn how to play a video when the mouse hovers over it and how to stop it when the mouse is removed from the video element. Sometimes, there is a need for a video on websites to automatically start playing when the user keeps the mouse over it because it reduces the number of clicks by the user on the website and gives a great experience to the user. To achieve that purpose, we use JavaScript to make it playable when the mouse hovers over it, and when the mouse comes out, it automatically stops playing.

Approach: First, we will attach a video file to our HTML DOM and then apply mouseover and mouseout event listeners using JavaScript. Below is the complete code implementation:

Example: In this example, we will use pure JavaScript to play the video.

HTML

<html>
<head>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
            flex-wrap: wrap; /* Allows videos to wrap in multiple rows */
        }
        .video-container {
            position: relative;
            width: 800px;
            margin: 20px;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease;
        }
        .video-container:hover {
            transform: scale(1.02);
        }
        .vid {
            width: 100%;
            display: block;
        }
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 1;
            transition: opacity 0.3s ease;
        }
        .overlay-text {
            color: white;
            font-size: 24px;
            text-align: center;
        }
        .video-container:hover .overlay {
            opacity: 0;
        }
    </style>
</head>
<body>
    <!-- First Video -->
    <div class="video-container">
        <video src="https://media.geeksforgeeks.org/wp-content/uploads/20210810214359/2.mp4"
               type="video/mp4" muted class="vid" loop>
        </video>
        <div class="overlay">
            <div class="overlay-text">Hover to play first video</div>
        </div>
    </div>

    <!-- Second Video -->
    <div class="video-container">
        <video src="https://media.geeksforgeeks.org/wp-content/uploads/20210810214359/2.mp4"
               type="video/mp4" muted class="vid" loop>
        </video>
        <div class="overlay">
            <div class="overlay-text">Hover to play second video</div>
        </div>
    </div>

    <!-- Third Video -->
    <div class="video-container">
        <video src="https://media.geeksforgeeks.org/wp-content/uploads/20210810214359/2.mp4"
               type="video/mp4" muted class="vid" loop>
        </video>
        <div class="overlay">
            <div class="overlay-text">Hover to play third video</div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // Select all video containers
            const videoContainers = document.querySelectorAll('.video-container');

            videoContainers.forEach((videoContainer) => {
                const video = videoContainer.querySelector('.vid');
                const overlay = videoContainer.querySelector('.overlay');

                // Function to play video
                function playVideo() {
                    video.play();
                    overlay.style.opacity = '0';
                }

                // Function to pause video
                function pauseVideo() {
                    video.pause();
                    overlay.style.opacity = '1';
                }

                // Add event listeners for hover and touch support
                videoContainer.addEventListener('mouseenter', playVideo);
                videoContainer.addEventListener('mouseleave', pauseVideo);
                videoContainer.addEventListener('touchstart', playVideo);
                videoContainer.addEventListener('touchend', pauseVideo);
            });
        });
    </script>
</body>
</html>

Output:

In this example

The script runs after the page content is fully loaded with DOMContentLoaded.
It selects the video container, video, and overlay elements from the HTML using querySelector.
The playVideo function plays the video and hides the overlay when triggered.
The pauseVideo function pauses the video and shows the overlay again.
It listens for mouse hover (mouseenter/mouseleave) and touch (touchstart/touchend) events to play and pause the video.

How to Open a Popup on Hover using JavaScript ?

namankumar2592

Improve

Article Tags :

How to Play Video on Mouse Hover and Pause on Mouseout using JavaScript?

Output:

Similar Reads

Thank You!

What kind of Experience do you want to share?