I'm designing a page where i want the video for each post to play when the user hovers the post. I've set it up like this:
<div class="project-link-block">
<div class="video-cover">
<video class="playonhover"height="100%" width="100%" muted playsinline loop data-object-fit="cover">
<source src="https://player.vimeo.com/progressive_redirect/playback/671122426/rendition/720p?loc=external&signature=e1562e4b2a73a9f37492359547fef09f8a3ed47a9d12fd77089930fc656a7d8e" type="video/mp4">
Your browser doesn't support HTML5 video tag.
</video>
</div>
</div>
<script>
$(document).ready(function() {
$(".playonhover").on("mouseover", function(event) {
this.play();
}).on('mouseout', function(event) {
this.pause();
});
})
</script>
This works, but I actually want the video to play when the top div (class .project-link-block) is hovered, not the video itself. Is there any way to do this? Switching the class in the JS didn't work. Using Webflow for this, in case it's relevant.
Did you also change this when you switched the class? Once you switch the class, the video element is no longer this.
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<div class="project-link-block">
<div class="video-cover">
<video class="playonhover" height="100%" width="100%" muted playsinline loop data-object-fit="cover">
<source
src="https://player.vimeo.com/progressive_redirect/playback/671122426/rendition/720p?loc=external&signature=e1562e4b2a73a9f37492359547fef09f8a3ed47a9d12fd77089930fc656a7d8e"
type="video/mp4">
Your browser doesn't support HTML5 video tag.
</video>
</div>
</div>
<script>
$(document).ready(function () {
$(".video-cover").on("mouseover", function (event) {
$(".playonhover").get(0).play();
}).on('mouseout', function (event) {
$(".playonhover").get(0).pause();
});
})
</script>
See if this code below achieves your expected result. Then convert to JQuery (if required).
<!DOCTYPE html>
<html>
<body>
<div class="project-link-block">
<div class="video-cover">
<video class="playonhover"height="100%" width="100%" muted playsinline loop data-object-fit="cover">
<!-- <source src="https://www.w3schools.com/tags/movie.mp4" type="video/mp4"> -->
<source type="video/mp4"
src="https://player.vimeo.com/progressive_redirect/playback/671122426/rendition/720p?loc=external&signature=e1562e4b2a73a9f37492359547fef09f8a3ed47a9d12fd77089930fc656a7d8e"
>
Your browser doesn't support HTML5 video tag.
</video>
</div>
</div>
<script>
window.addEventListener( "load", on_documentReady );
function on_documentReady()
{
//const myTargets = document.getElementsByClassName("playonhover");
const myTargets = document.getElementsByClassName("project-link-block");
for (var i = 0; i < myTargets.length; i++)
{
myTargets[i].onmouseover = handle_mouseOver;
myTargets[i].onmouseout = handle_mouseOut;
}
}
function handle_mouseOver( evt )
{
//alert( "## was rolled over" );
evt.target.play();
}
function handle_mouseOut( evt )
{
//alert( "## was rolled out" );
evt.target.pause();
}
</script>
</body>
</html>