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?
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
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.
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
...
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
...
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...
By @Nancy OShea
I think some of the eye candy can be mitigated by either removing elements from the dom or 2nd best hiding them and just including a play button for the videos on mobile. It needs thinking about but I agree it seems like madness to build and maintain 2 websites, one for desktop and one for mobile. I see no point where there is little, if any benefit, assuming you manage the content based on what device you are delivering to.
I think the OP is on a learning curve as this is not their main occupation and to be honest they are doing quiet well given its foreign territory to them.
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...
By @Nancy OShea
I think some of the eye candy can be mitigated by either removing elements from the dom or 2nd best hiding them and just including a play button for the videos on mobile. It needs thinking about but I agree it seems like madness to build and maintain 2 websites, one for desktop and one for mobile. I see no point where there is little, if any benefit, assuming you mange the content based on what device you are delivering to.
I think the OP is on a learning curve as this is not their main occupation and to be honest they are doing quiet well given its foreign territory to them.
By @osgood_
Thank you Osgood thats quite kind. I really do try. And heed your guidance. Im a self taught film director (Im one of the few in the Directors Guild of America - in the company of Speilberg etal..) so I pride myself on learning by diving in..and well, repetition..lots of repetition, to para-quote Malcom Gladwell :)..
I do use a playbutton on mobile https://toddheymandirector.com/mobile/reel/ and I hear you Nancy and cannot deny the extra work that goes into maintaining two sites or the albatross of a redirect- but desktop is priority in my business- production companies and ad agencies make collective decisions about investing sometimes millions into a film director capabilities - so they are viewing in the most optimal environment which is ultimately desktop. So until I have time to learn how to re-develop it into a responsive site (still the goal..The site is only a few pages and movies so its not a monster at this point but of course I want it to operate seamlessly across all platforms/devices just like you all do) - I have to aim for what I know will dazzle (its still about the film work but presentation counts) on desktop then trickle down to mobile from there not the other way around.
always grateful for your input
T