Skip to content

Instantly share code, notes, and snippets.

@ratulkuri

ratulkuri/play-video-on-hover-with-delay.html

Created July 3, 2023 21:59
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ratulkuri/b35b1bd2e09c64217498b27a0b816e52 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ratulkuri/b35b1bd2e09c64217498b27a0b816e52 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
play-video-on-hover-with-delay.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.item-anchor.playing .cover {
display: none !important;
}
.item-anchor.playing .video {
display: block !important;
}
</style>
</head>
<body class="bg-white">
<section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-wrap -m-4">
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<a class="item-anchor block relative h-48 rounded overflow-hidden">
<img alt="ecommerce" class="cover object-cover object-center w-full h-full block"
src="https://dummyimage.com/420x260">
<video class="video object-cover object-center w-full h-full block hidden" muted>
<source
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
type="video/mp4">
</video>
</a>
<div class="mt-4">
<h2 class="text-gray-900 title-font text-lg font-medium">The Catalyzer</h2>
</div>
</div>
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<a class="item-anchor block relative h-48 rounded overflow-hidden">
<img alt="ecommerce" class="cover object-cover object-center w-full h-full block"
src="https://dummyimage.com/421x261">
<video class="video object-cover object-center w-full h-full block hidden" muted>
<source
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
type="video/mp4">
</video>
</a>
<div class="mt-4">
<h2 class="text-gray-900 title-font text-lg font-medium">Shooting Stars</h2>
</div>
</div>
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<a class="item-anchor block relative h-48 rounded overflow-hidden">
<img alt="ecommerce" class="cover object-cover object-center w-full h-full block"
src="https://dummyimage.com/422x262">
<video class="video object-cover object-center w-full h-full block hidden" muted>
<source
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
type="video/mp4">
</video>
</a>
<div class="mt-4">
<h2 class="text-gray-900 title-font text-lg font-medium">Neptune</h2>
</div>
</div>
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<a class="item-anchor block relative h-48 rounded overflow-hidden">
<img alt="ecommerce" class="cover object-cover object-center w-full h-full block"
src="https://dummyimage.com/423x263">
<video class="video object-cover object-center w-full h-full block hidden" muted>
<source
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
type="video/mp4">
</video>
</a>
<div class="mt-4">
<h2 class="text-gray-900 title-font text-lg font-medium">The 400 Blows</h2>
</div>
</div>
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<a class="item-anchor block relative h-48 rounded overflow-hidden">
<img alt="ecommerce" class="cover object-cover object-center w-full h-full block"
src="https://dummyimage.com/424x264">
<video class="video object-cover object-center w-full h-full block hidden" muted>
<source
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
type="video/mp4">
</video>
</a>
<div class="mt-4">
<h2 class="text-gray-900 title-font text-lg font-medium">The Catalyzer</h2>
</div>
</div>
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<a class="item-anchor block relative h-48 rounded overflow-hidden">
<img alt="ecommerce" class="cover object-cover object-center w-full h-full block"
src="https://dummyimage.com/425x265">
<video class="video object-cover object-center w-full h-full block hidden" muted>
<source
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
type="video/mp4">
</video>
</a>
<div class="mt-4">
<h2 class="text-gray-900 title-font text-lg font-medium">Shooting Stars</h2>
</div>
</div>
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<a class="item-anchor block relative h-48 rounded overflow-hidden">
<img alt="ecommerce" class="cover object-cover object-center w-full h-full block"
src="https://dummyimage.com/427x267">
<video class="video object-cover object-center w-full h-full block hidden" muted>
<source
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
type="video/mp4">
</video>
</a>
<div class="mt-4">
<h2 class="text-gray-900 title-font text-lg font-medium">Neptune</h2>
</div>
</div>
<div class="lg:w-1/4 md:w-1/2 p-4 w-full">
<a class="item-anchor block relative h-48 rounded overflow-hidden">
<img alt="ecommerce" class="cover object-cover object-center w-full h-full block"
src="https://dummyimage.com/428x268">
<video class="video object-cover object-center w-full h-full block hidden" muted>
<source
src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
type="video/mp4">
</video>
</a>
<div class="mt-4">
<h2 class="text-gray-900 title-font text-lg font-medium">The 400 Blows</h2>
</div>
</div>
</div>
</div>
</section>
<script>
let selectors = document.querySelectorAll(".item-anchor");
let delay = 1500,
countdown;
console.log(selectors);
for (selector of selectors) {
let vidElm = selector.querySelector(".video");
let trigger = selector;
trigger.addEventListener("mouseover", () => {
console.log("Mouse over start", countdown);
clearTimeout(countdown);
countdown = setTimeout(
() => {
trigger.classList.add("playing");
vidElm.play();
console.log("event fired", trigger.classList);
},
delay,
);
console.log("Mouse over end", countdown);
});
trigger.addEventListener("mouseleave", () => {
console.log("Mouse leave");
clearTimeout(countdown);
trigger.classList.remove("playing");
vidElm.pause();
// vidElm.currentTime = 0;
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment