Video Controls – Mouse hover
You can enhance video elements by adding events to the player, such as playing the video on mouse hover.
index.html
1<!DOCTYPE html>
2 <html>
3 <head>
4 <title>Docs Advanced - Video Controls Mouse Hover</title>
5 <meta charset="utf-8" />
6 <meta name="viewport" content="width=device-width, initial-scale=1" />
7
8 <style>
9 * {
10 box-sizing: border-box;
11 }
12
13 html,
14 body,
15 #root {
16 width: 100%;
17 height: 100%;
18 margin: 0;
19 padding: 0;
20 }
21
22 body{
23 display: grid;
24 justify-content: center;
25 align-items: center;
26 }
27
28 video {
29 background-color: white !important;
30 outline: none;
31 clip-path: inset(-10px);
32 outline:none;
33 border: none;
34
35 width: 340px !important;
36 height: 340px !important;
37 object-fit: cover;
38
39 border: 1px solid grey;
40 cursor: pointer !important;
41 }
42
43 video:hover {
44 border-color: black;
45 }
46
47 .vjs-poster{
48 background-color: transparent !important;
49 }
50
51 video:focus {
52 outline:none;
53 }
54 </style>
55 <link href="https://vjs.zencdn.net/8.16.1/video-js.css" rel="stylesheet" />
56 </head>
57 <body>
58 <script src="https://unpkg.com/focus-visible"></script>
59 <video
60 id="my-video"
61 class="video-js"
62 loop muted
63 preload="auto"
64 width="340"
65 height="340"
66 data-setup="{}"
67 >
68 <source src="https://github.com/alterproduct/examples-vanilla-js/raw/refs/heads/main/other-video-controls-hover/assets/video-controls-loop-embeding.webm" type="video/webm"/>
69 <p class="vjs-no-js">
70 To view this video please enable JavaScript, and consider upgrading to a
71 web browser that
72 <a href="https://videojs.com/html5-video-support/" target="_blank"
73 >supports HTML5 video</a
74 >
75 </p>
76 </video>
77 <script src="https://vjs.zencdn.net/8.16.1/video.js"></script>
78 <script>
79 document.addEventListener("DOMContentLoaded", function () {
80 const player = videojs("my-video");
81
82 player.ready(() => {
83 const videoElement = document.getElementById("my-video");
84
85 videoElement.addEventListener("mouseenter", () => {
86 player.play();
87 });
88
89 videoElement.addEventListener("mouseleave", () => {
90 player.pause();
91 });
92 });
93 });
94 </script>
95 </body>
96</html>