Video Controls - Mouse hover
You can enhance video elements by adding events to the player, such as playing the video on mouse hover.
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Video Controls - Hover Play/Pause</title>
5 <meta charset="utf-8" />
6 <meta name="viewport" content="width=device-width, initial-scale=1" />
7
8 <style>
9 * { box-sizing: border-box; }
10
11 html, body {
12 width: 100%;
13 height: 100%;
14 margin: 0;
15 padding: 0;
16 }
17
18 body {
19 display: grid;
20 place-items: center;
21 }
22
23 video {
24 width: 340px;
25 height: 340px;
26 object-fit: cover;
27 border: 1px solid #999;
28 cursor: pointer;
29 outline: none;
30 background: white;
31 }
32
33 video:hover { border-color: #111; }
34 video:focus { outline: none; }
35 </style>
36 </head>
37 <body>
38 <video id="v" loop muted preload="auto" playsinline>
39 <!-- Podmień src na własny plik .webm/.mp4 -->
40 <source src="/media/video-controls-loop.webm" type="video/webm" />
41 </video>
42
43 <script>
44 (function(){
45 const el = document.getElementById('v');
46 if (!el) return;
47
48 el.addEventListener('mouseenter', () => el.play().catch(() => {}));
49 el.addEventListener('mouseleave', () => el.pause());
50 })();
51 </script>
52 </body>
53</html>React - App.js
import { useEffect, useRef } from "react";
import "./Styles.css";
export default function App() {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const onEnter = () => el.play().catch(() => {});
const onLeave = () => el.pause();
el.addEventListener("mouseenter", onEnter);
el.addEventListener("mouseleave", onLeave);
return () => {
el.removeEventListener("mouseenter", onEnter);
el.removeEventListener("mouseleave", onLeave);
};
}, []);
return (
<div className="wrap">
<video ref={ref} loop muted preload="auto" playsInline>
{/* Podmień src na własny plik */}
<source src="/media/video-controls-loop.webm" type="video/webm" />
</video>
</div>
);
}React - Styles.css
* { box-sizing: border-box; }
html, body, #root {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.wrap {
width: 100%;
height: 100%;
display: grid;
place-items: center;
}
video {
width: 340px;
height: 340px;
object-fit: cover;
border: 1px solid #999;
background: white;
cursor: pointer;
outline: none;
}
video:hover { border-color: #111; }
video:focus { outline: none; }