responsive hover bug

[REELHERO]

hey gang - As you guys know I made my site responsive  finally - and it works in most ways the only thing i cant figure out..

this page

https://toddheymandirector.com/reel/

My rollovers work on desktop and on a mobile/tablet developer tools simulator, the overlay doesnt show and one tap and it takes you to the movie page - however on an ACTUAL phone/mobile its not functioning properly

the movie doesnt show but it still is recognizing a hover function and transitions to black on touch - if you hit it a second time it goes to the movie page-- which obviously is ng since no one will know to do that--

and on tablet it will either play the rollover or just requires a second tap--

see attached for both--

the idea I would think is to have the hover function not even exist for mobile so one tap takes you to the movie page-- 

not sure if a media query for touch screen preventng the hover function will do that bc it seems one for screen width isnt cutting it..

thoughts?

[Nancy OShea]

I saw this coming initially.  If you'll remember, I said this HOVER effect was all for naught and would not work right on a responsive website.  Now you know why. 😉

Emulators are not a reliable test of actual devices.  The manner in which people use mobiles is different from desktops. 

I build for mobile first because it supports the widest audience based on my user device data. 

[osgood_]

Youre probably looking on an iPhone or iPad iOS as it functions ok on an Android device, the onclick part does anyway, which takes you to the relevent movie on the movie-player page. Obviously the hover effect isnt going to work on mobile devices.

Unfortunatley I have no experience of Apple device anonymity situations but they seem to have more than their fair share of issues when it comes to browser compatibilities. Apple is the new Microsoft - a PITA, as witnessed by its massive security flaws today.

The idea on mobile would be to ditch the movies behind the overlay image and just have the overlay image and a click function which takes you to the movie page. I dont really see the point in having the movie behind the image anyway either on desktop or mobile as you have a stand-alone movie player to handle the movies.

[Nancy OShea]

Add to that the wild differences between last generation iOS vs new generation iOS and how various browsers (Safari, FF, Chrome) behave.

[REELHERO]

PITA lol. Im using that its great--

i hear you both  (Nancy i 100% imagined you waiting for this moment to say I told you so.. 😉

Im not unaware of the complications.. as you must have figured out by now Im stubborn and willful.. 

Im sure youre sick of this site but its the high bar in the commercial production biz and they manage to have it animate on desktop and static on mobile seamlessly so Im chasing that thoroghbred:

https://smugglersite.com/global/commercials/lucy-forbes/bbc-this-is-going-to-hurt-trailer

as for the reason - its a 3 second teaser to draw you in - to look at a spot you might otherwise skip over- exactly as they do above and I know for a fact its effective -- and desktop is king..  so I will keep trying until i have to give up..

appreciate your observations though!

[Nancy OShea]

I get no enjoyment from this.  Dom Pérignon expectations on a Bud Light budget is a very tall work order.

Smugglersite.com site is created by Funkhause in Los Angeles.  Maybe you should reach out to the site's creative team.  Nothing ventured, nothing gained.

[REELHERO]

nailed it Nancy. Going forward Ill hire a designer but Im pretty proud of what Ive achieved (with all your help) so far-

Great idea. Just sent an email to them..

enjoy the weekend-T

[Liam Dilley]

You are using jQuery (but a really old one) but in jQuery you have on hover and tap/touch.

You can...

$('.target').on('click touchstart', function () {

asdas