rollovers with Mp4/m4v instead of animated gif

[REELHERO]

I have rollover thumbs on this page and Im trying to replace my animated gifs with Mp4/m4v so that it loads cleaner

current page

https://toddheymandirector.com/reel/

but when i replace it with an mp4 it breaks -

https://toddheymandirector.com/reel/index_mp4test.html

do i need a special tag?

[Nancy OShea · Accepted solution]

4 words:  No mouse, no hover.

More than half of internet traffic comes from touch screens -- mobiles, tablets, hybrids & 4K ultra HD interactive displays.

But if you really think this will improve your site, see code example below.

https://codepen.io/gil411e8085ef/pen/bNxZWg

[REELHERO]

thank you Nancy -

Its only for desktop - my mobile site (Im converting my site to responsive as soon as I have time for now its a redirect) doesnt have it for that very reason https://toddheymandirector.com/mobile/

how would i convert that so that i can individual background images and not have it included in the css - since the script includes that class (.video)?

[Nancy OShea]

Create separate CSS & JS for each class.  Replace .video and 'video' with your classnames:

.class1

.class2

.class3

and so on...

[REELHERO]

I modified the script and was able to get the video to play on hover without individual classes

https://toddheymandirector.com/reel/index_v_rollover.html

however I cant the video to hide (and go back to the jpg on mouseout) 

my script:

$(document).ready(function() {
$(".myvideos").on("mouseover", function(event) {
this.play();

}).on('mouseout', function(event) {
this.hide();
});
})

[REELHERO]

**just the first two are mp4s

[osgood_ · Accepted solution]

I modified the script and was able to get the video to play on hover without individual classes

https://toddheymandirector.com/reel/index_v_rollover.html

however I cant the video to hide (and go back to the jpg on mouseout) 

By @REELHERO

Comment out the script below <!--   -->

<!--<script src="https://toddheymandirector.com/js/alex_thumb_rollover_2022.js"></script>-->

The jpg will return when the mouse leaves the area.

[REELHERO]

Osgood you see the maitrix as always-- merci!

last question and I should be good to go--

why is the first image smaller than the others?

https://toddheymandirector.com/reel/index_v_rollover.html

Doesnt matter if I switch out the images the first one is always smaller:

https://toddheymandirector.com/reel/index_v_rollover2.html

I have width set to 100%. I cant find a border or padding.. and the style should be the same for all the images anyway..

thoughts?

[osgood_]

last question and I should be good to go--

why is the first image smaller than the others?

https://toddheymandirector.com/reel/index_v_rollover.html

Doesnt matter if I switch out the images the first one is always smaller:

https://toddheymandirector.com/reel/index_v_rollover2.html

I have width set to 100%. I cant find a border or padding.. and the style should be the same for all the images anyway..

thoughts?

By @REELHERO

All the other anchor tags have the id set to 'movie2' whilst your first one is just 'movie'

<a title="" id="movie" href="../../reel/movies/nike_the_getaway">

I guess there is something in the 'movie2' css that is affecting the width and height of the container so change the id to 'movie2':

<a title="" id="movie2" href="../../reel/movies/nike_the_getaway">

You should not repeat an id anymore than once on a page. If you have duplicate instances of a css selector you should use a class.

[REELHERO]

bingo

https://toddheymandirector.com/reel/index_v_rollover.html

thank you again!

[Liam Dilley]

It works but you are loading all the videos and they are just playing behind the images there.

You can have it where they are muted paused videos and the first frame showing and then..
https://jsfiddle.net/8cowtvfu/
So..
https://codepen.io/TheNexus_00/pen/yLKpKdW

[REELHERO]

shouldnt this do it

$(document).ready(function() {
$(".thumbvideo").on("mouseover", function(event) {
this.play();

}).on('mouseout', function(event) {
this.hide();

}).on('mouseout', function(event) {
this.pause();
});
});

or is this more efficient?

$(document).ready(function() {
$(".thumbvideo").on("mouseover", function(event) {
this.play();

}).on('mouseout', function(event) {
this.pause.hide();


});
});

[osgood_ · Accepted solution]

Yes all your videos are just playing in the background under the cover image on page load in a continuous loop if that is what you want.

If not get rid of the auto play from the video tags and see if that solves the issue:

autoplay="autoplay"

If that doesnt work I suggest you add a class name to the div the video is contained within, example below uses 'videoWrapper' also remove loop="loop" and autoplay="autoplay" from your current code.

<div class="videoWrapper"><video class="thumbvideo  thumb-image-overlay" source src="http://toddheymandirector.com/Images/thumbs/nike_thegetaway_hot.mp4" width="100%" height="auto" alt="" muted="muted"/></video>

Then get rid of the jQuery stuff you are currently using to control the playing and pausing of the videos (as I dont know enough jQuery to convert from vanilla javascript) and use the vanilla javascript below:

const thumbvideo = document.querySelectorAll('.thumbvideo');
const thumbOverlay = document.querySelectorAll('.thumb-overlay');
const videoWrapper = document.querySelectorAll('.videoWrapper');


thumbOverlay.forEach(function(video, index) {
video.onmouseover = function() {
thumbvideo[index].play();
}
});

videoWrapper.forEach(function(video, index) {
video.onmouseleave = function() {
thumbvideo[index].pause();
}
});

Your videos should now only play when the mouse rolls over the cover image and pause when the mouse leaves the videoWrapper container.

[REELHERO]

Vanilla Javascrip lol-- the vanilla did the trick-

https://toddheymandirector.com/reel

[REELHERO]

one more observational note senor Osgood--

the intersecionObserver is known to have some issues in safari --

https://stackoverflow.com/questions/62084306/intersectionobserver-not-working-in-safari-or-ios

and if you open up https://toddheymandirector.com/reel/

in Safari it does stutters its way up.. where as chrome it moves like buttered silk..

however some of the solves were included in your script.. 

are you finding that intersection observer is not fully supported yet?

[osgood_]

It does look a little bit janky in Safari. The first 2 videos slide up, slow down and almost stop, then slide up a bit more to their resting place. I dont really know why, other than Im leaning towards the load time of the videos is slowing the process down somehow in Safari.

However even if I remove the videos the images follow the same pattern in Safari which should not happen. I've tested in a clean page, with only images, and both Chrome and Safari perform about the same so it could be something in your scripts/css or code which attributes to this happening.

I cant help feeling that instead of whacking a whole bank of videos on the page you should be using some kind of video viewer. 

[REELHERO]

Im probably biting off more than I can chew but I want to at least try before I give up

Im sure youre sick of this ref - but it works great in safari:

https://smugglersite.com/global/commercials/kathryn-bigelow/apple-hollywood-in-your-pocket

and their vids are even a little larger. hmm.. maybe they pre-load the vids?

Meantime Ill test the css/script/code - see if theres a conflict there

[osgood_ · Accepted solution]

Im not sure what they are using - a combination of Word Press and nuxt.js it looks like but its impossible these days to decipher the code. Its all packaged and minified into some kind of bundle, lol. Not like the old days when everyone used just plain old html, css and javascript.

It seems to work better IF some content is above the video, as like in the example. Ive put a test page together:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Intersection Observer Test</title>
<style>
h1 {
text-align: center;
padding: 30px;
}
.videoGalleryWrapper {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 90%;
margin:	0 auto;
}

.videoContainer {
position: relative;
opacity: 0;
width: 49.5%;
margin:	0 0 15px 0;
overflow: hidden;
transform: translateY(130px);
transition: all 1s ease-in-out;
}
.videoContainer img {
max-width: 100%;
display: block;
}
video {
width: 100%;
height: auto;
}
.videoOverlay {
position: absolute;
z-index: 10;
top: 0;
width: 100%;
height: 100%;
transition: opacity 500ms ease-in-out;
}
.videoOverlay:hover {
opacity: 0;
}
.videoText {
position: absolute;
bottom: 35px;
width: 100%;
z-index: 20;
transform: translateY(50px);
transition: transform 500ms ease-in-out;
font-size: 20px;
color: #fff;
text-align: center;
}
.fadeInVideo {
opacity: 1;
transform: translateY(0);
}
.slideUpVideoText {
transform: translateY(0);
}
.spacer {
height: 500px;
width: 90%;
margin: 0 auto 30px auto;
background-color: lightgrey;
}
</style>
</head>
<body>

<h1>Intersection Observer Test</h1>
<div class="spacer"></div>

<div class="videoGalleryWrapper">

<div class="videoContainer">
<div class="videoOverlay">
<img src="https://toddheymandirector.com/Images/thumbs/nike_thegetaway.jpg"	alt="">
</div>
<video src="https://toddheymandirector.com/Images/thumbs/nike_thegetaway_hot.mp4" muted class="video"></video>
<div class="videoText">Video 1</div>
</div>

<div class="videoContainer">
<div class="videoOverlay">
<img src="https://toddheymandirector.com/Images/thumbs/nike_thegetaway.jpg"	alt="">
</div>
<video src="https://toddheymandirector.com/Images/thumbs/nike_thegetaway_hot.mp4" muted class="video"></video>
<div class="videoText">Video 2</div>
</div>

<div class="videoContainer">
<div class="videoOverlay">
<img src="https://toddheymandirector.com/Images/thumbs/nike_thegetaway.jpg"	alt="">
</div>
<video src="https://toddheymandirector.com/Images/thumbs/nike_thegetaway_hot.mp4" muted class="video"></video>
<div class="videoText">Video 3</div>
</div>


<div class="videoContainer">
<div class="videoOverlay">
<img src="https://toddheymandirector.com/Images/thumbs/nike_thegetaway.jpg"	alt="">
</div>
<video src="https://toddheymandirector.com/Images/thumbs/nike_thegetaway_hot.mp4" muted class="video"></video>
<div class="videoText">Video 4</div>
</div>

<div class="videoContainer">
<div class="videoOverlay">
<img src="https://toddheymandirector.com/Images/thumbs/nike_thegetaway.jpg"	alt="">
</div>
<video src="https://toddheymandirector.com/Images/thumbs/nike_thegetaway_hot.mp4" muted class="video"></video>
<div class="videoText">Video 5</div>
</div>


<div class="videoContainer">
<div class="videoOverlay">
<img src="https://toddheymandirector.com/Images/thumbs/nike_thegetaway.jpg"	alt="">
</div>
<video src="https://toddheymandirector.com/Images/thumbs/nike_thegetaway_hot.mp4" muted class="video"></video>
<div class="videoText">Video 6</div>
</div>

<div class="videoContainer">
<div class="videoOverlay">
<img src="https://toddheymandirector.com/Images/thumbs/nike_thegetaway.jpg"	alt="">
</div>
<video src="https://toddheymandirector.com/Images/thumbs/nike_thegetaway_hot.mp4" muted class="video"></video>
<div class="videoText">Video 7</div>
</div>

<div class="videoContainer">
<div class="videoOverlay">
<img src="https://toddheymandirector.com/Images/thumbs/nike_thegetaway.jpg"	alt="">
</div>
<video src="https://toddheymandirector.com/Images/thumbs/nike_thegetaway_hot.mp4" muted class="video"></video>
<div class="videoText">Video 8</div>
</div>

</div>
<!-- videoGalleryWrapper -->


<script>
// Assign videoOverlay to variable
const videoOverlay = document.querySelectorAll('.videoOverlay');

// Assign videoText to variable
const videoText = document.querySelectorAll('.videoText');

// Assign videos to variable
let video = document.querySelectorAll(".video")

// Loop through videoOverlay variable and add event listener, play video
videoOverlay.forEach(function(videoOverlay, index) {
videoOverlay.addEventListener("mouseover", function (e) {
video[index].play();
videoText[index].classList.add('slideUpVideoText');
})

// Pause video on mouse out
videoOverlay.addEventListener("mouseout", function (e) {
video[index].pause();
videoText[index].classList.remove('slideUpVideoText');
});

});

</script>


<script>

if ( 'IntersectionObserver' in window ) {

let observer = new IntersectionObserver(function (entries, observer) {
let delay = 0;

entries.forEach(function (entry) {
if (entry.isIntersecting) {
setTimeout(function () {
entry.target.classList.add('fadeInVideo');
}, delay);

delay += 200;

observer.unobserve(entry.target);
}
});
}, { threshold: 0.1 } ); // only show elements when 15% inside bottom of viewport

// observe the elements to be animated
document.querySelectorAll( '.videoContainer' ).forEach( function (el) {
observer.observe(el);
} );

}

</script>

</body>
</html>

[REELHERO]

Im not sure what they are using - a combination of Word Press and nuxt.js it looks like but its impossible these days to decipher the code. Its all packaged and minified into some kind of bundle, lol. Not like the old days when everyone used just plain old html, css and javascript.

By @osgood_

I know! it was horizontally minified! took me  an hour to scroll across lol

that did work; 

I laid it in a page

https://toddheymandirector.com/reel/index_555.html

so much smoother! so having the video below works better -- that actually makes sense--

I had to paste all the css into the page bc a link to the stylesheet created a conflict.. 

two quick questions -

1. it somehow broke the menu/toggle/overlay

I put an outrageous z-index to see if it was that.. but i dont think so.. and the script is there on the bottom of the page--so not sure..

2. I adjusted the margins so there would be a hairline border except its wider on the left and right and i cant figure out why.. 

I

[REELHERO]

figured it out - working now -

https://toddheymandirector.com/reel/

just the margins Im not sure but thats no biggie - ill get it!

[osgood_]

I don't see the margin issue, nothing jumps out to me as being abnormal. The animation effect appears to be much smooth in Safari now but it still works marginally better in Chrome. I guess thats just how it works in different environments.

[REELHERO]

It looks great - really happy - next I will make it responsive.. But I better go and book some directing work in the meantime.

Thanks again for the support..Means a lot! Hope Ive made you at least semi-proud!

[Liam Dilley]

What you got can be made responsive really easily! You are honestly not that far off from that.

[REELHERO]

you think so Liam?-I started looking into it yesterday-- 

My biggest concern is my "campaigns" page

 to keep the current rollover page for desktop and a non hover for mobile/tablet

current desktop:

https://www.toddheymandirector.com/reel/

current mobile

https://www.toddheymandirector.com/mobile/reel/

and having it a single column for portrait and 2 columns for landscape and allowing the titles to scale appropriately 

i feel like the landing page and 'about' and 'connect' pages are a little easier - 

ive already added <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> as a start

[Nancy OShea]

I must call your attention to the elephant in the room. 

1. Redirects are pure poison.

2. When the site is re-built responsively (1 site for all devices), all this mishigas will have to be removed and replaced with a mobile-first approach.

Something to think about...