• 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

603

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
LEGEND ,
Aug 01, 2022 Aug 01, 2022

Copy link to clipboard

Copied

quote

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.

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

quote
quote

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

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