• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

rollovers with Mp4/m4v instead of animated gif

Contributor ,
Jul 29, 2022 Jul 29, 2022

Copy link to clipboard

Copied

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?

Views

578

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 4 Correct answers

Community Expert , Jul 30, 2022 Jul 30, 2022

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

 

 

 

 

Votes

Translate

Translate
LEGEND , Jul 31, 2022 Jul 31, 2022
quote

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.

Votes

Translate

Translate
LEGEND , Aug 01, 2022 Aug 01, 2022

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
...

Votes

Translate

Translate
LEGEND , Aug 02, 2022 Aug 02, 2022

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=de
...

Votes

Translate

Translate
Community Expert ,
Jul 30, 2022 Jul 30, 2022

Copy link to clipboard

Copied

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

 

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jul 30, 2022 Jul 30, 2022

Copy link to clipboard

Copied

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)?

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 30, 2022 Jul 30, 2022

Copy link to clipboard

Copied

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

.class1

.class2

.class3

and so on...

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jul 30, 2022 Jul 30, 2022

Copy link to clipboard

Copied

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();
});
})

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jul 30, 2022 Jul 30, 2022

Copy link to clipboard

Copied

**just the first two are mp4s

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 31, 2022 Jul 31, 2022

Copy link to clipboard

Copied

quote

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jul 31, 2022 Jul 31, 2022

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 31, 2022 Jul 31, 2022

Copy link to clipboard

Copied

 

quote

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Jul 31, 2022 Jul 31, 2022

Copy link to clipboard

Copied

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 31, 2022 Jul 31, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Aug 01, 2022 Aug 01, 2022

Copy link to clipboard

Copied

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();


});
});

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 01, 2022 Aug 01, 2022

Copy link to clipboard

Copied

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.

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Aug 01, 2022 Aug 01, 2022

Copy link to clipboard

Copied

Vanilla Javascrip lol-- the vanilla did the trick-

 

https://toddheymandirector.com/reel

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Aug 01, 2022 Aug 01, 2022

Copy link to clipboard

Copied

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?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 02, 2022 Aug 02, 2022

Copy link to clipboard

Copied

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. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Aug 02, 2022 Aug 02, 2022

Copy link to clipboard

Copied

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

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 02, 2022 Aug 02, 2022

Copy link to clipboard

Copied

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>

 

 

 

 

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Aug 02, 2022 Aug 02, 2022

Copy link to clipboard

Copied

quote

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

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Aug 02, 2022 Aug 02, 2022

Copy link to clipboard

Copied

figured it out - working now -

https://toddheymandirector.com/reel/

 

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 02, 2022 Aug 02, 2022

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Aug 02, 2022 Aug 02, 2022

Copy link to clipboard

Copied

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Aug 03, 2022 Aug 03, 2022

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Aug 04, 2022 Aug 04, 2022

Copy link to clipboard

Copied

LATEST

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Aug 01, 2022 Aug 01, 2022

Copy link to clipboard

Copied

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...

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines