Hi guys, I have a section where the videos only start playing when I hover my mouse over them. How can I force them to play automatically? → MyTutor.nl
Hi @User026 ,
If your videos only play on hover, it usually means the theme is triggering playback via a hover event in JavaScript. To make them play automatically, update the video tag to include autoplay attributes like this:
<video autoplay muted loop playsinline>
If the theme still controls playback on hover, you’ll need to remove or modify the hover-based script in the section’s JavaScript (often something like mouseenter / mouseleave events).
Hi @User026 ,
Looks like it’s not really an autoplay issue.
Your videos aren’t loading immediately they’re using lazy load (data-src, lazy, preload none), so nothing actually plays until something triggers it (like hover).
You can try removing lazy load and just using a normal src on the video, e.g.
<video src="YOUR_VIDEO_URL" autoplay muted loop playsinline></video>
If you still want to keep lazy loading, then you’ll need to load and play the video manually after the page loads, for example:
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll("video.lazy").forEach(video => {
const src = video.getAttribute("data-src");
if (src) {
video.src = src;
video.load();
video.muted = true;
video.play().catch(() => {});
}
});
});
Also possible there’s some JS in the theme (slider / hover stuff) controlling playback, so that could be interfering too.
If you can share which theme or section this is from, easier to point exactly where it’s coming from.
You need to use the Autoplay feature in that case.