How to Play Video on Mouse Hover and Pause on Mouseout Using Pure JavaScript

TIAL WIZARDS

15 Sep, 2022

A+ A-

Hi to all, in this article I am going to tell you all about how to play video on mouse hover and pause on mouseout easily in just few minutes by using JavaScript.

Sometimes we may have a need where we want that video on websites to automatically starts playing when the user keeps the mouse hover it because it reduces the number of clicks by the user on the website and gives a great experience to the website visitors.

So, to achieve it here we are using JavaScript to make it playable when the mouse hovers on it and when the mouse comes out then it will automatically stops playing the video.

How to Play Video on Mouse Hover and Pause on Mouseout Using Pure JavaScript

So, read the below provided steps carefully and completely to get clear understanding about adding the code inside blogger website theme without any error or issue.

Steps to Add the Feature in Blogger Website

Login to Blogger Website

First of all you need to visit official blogger website and click on sign-in.

Now you need to login to blogger website dashboard by using your login credentials.

Backup Blogger Theme

After sign-in to your website dashboard, you need to backup your website theme so that if any error or issue occurred then you can restore your website theme code and run your website as usual.

Path: Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on backup -> Click on download -> Verify Captcha -> Save the downloaded file in a safe place for future use.

Open Blogger Theme Editor

After successful backup of your website, now you need to open blogger website theme editor to add the code inside it.

Path: Blogger website dashboard -> Click on theme section ->Click on arrow icon -> Click on Edit HTML -> Blogger theme editor section.

Adding JavaScript Code

Follow below steps:

Open blogger theme editor
Press CTRL+F and find for </body> tag
Now copy below provided JavaScript code
Paste the copied code just above </body> tag



<script>
        let clip = document.querySelector(".vid")
        clip.addEventListener("mouseover", function (e) {
            clip.play();
        })
        clip.addEventListener("mouseout", function (e) {
            clip.pause();
        })
</script>

After adding the JavaScript code click on save button to save the entire theme code and it will take few seconds to process the entire code and after successful processing of the code you will get a message i.e. Updated Successfully.

Create/Open Post or Page

Now you need to create or open any post or page to add the video feature inside it and follow below steps:

Create or open page/post
Change Compose view to HTML view
Now copy below provided HTML code
Paste the copied code in the desired location inside the post or page
Click on publish or update



    <!-- Video element -->
    <video src=
"demo.mp4"
        type="video/mp4" muted class="vid" 
        loop style="border: solid; width: 800px;">
    </video>

After adding the above code in your theme editor make sure that you change the source link from above code with your code src="demo.mp4"

Now you have successfully added this feature in you blogger website without any error or issue.

Note

If you get any error while saving the code in theme editor then you need to restore your backup code and repeat the same process as mentioned in above steps carefully.

After adding the HTML code make sure to add the source link of your video as src="demo.mp4", if you will not change the source link then it will not show.

If you want to add multiple video players then just copy and paste html code and change the source link for different videos.

Conclusion

I hope that you have understood about adding play video on mouse hover and pause on mouseout feature in blogger easily in just few minutes by using simple HTML and JavaScript codes.

How to Play Video on Mouse Hover and Pause on Mouseout Using Pure JavaScript