Hero video - image on mobile help!

I Need Help
1

Hi all,

I am testing a website (which I can share in private only at the moment) and on the home page I have a background video playing using hero header.

My client wants to have an image on mobile and not the video.

Now I created 2 x hero’s and set 1 for all breakpoints for video and not on mobile, and one for mobile with the image - now doing this, the STICKY header does not work on mobile, as I understand you can only have 1 x instance with this.

So I then just had 1 x hero and create a class and have video on large 3 and on mobile an image.

This works perfect on Safari - but not on other browsers…

Any advice how to create this best and maintaining Sticky header on the hero throughout.

Thanks all

(I remember having this issue a few years ago, but convinced my client to have a video throughout, and they are happy with this! - also saw an old post from @Flashman where this was hard to do)

Just want an image on mobile and video on the others and have the hero stick header work.

2

@Flashman did you ever get this to work - to have an image on mobile?

I can do it if I create 2 x hero, and have one purely for image on mobile - but I can’t have the sticky header then on that one.

Or can’t see why it works as intended on Safari! But no other browser.

3

Technically you could use the .video-bg-container class to hide the video element on various breakpoints with display none. And use another class on the bloc to add an image, when the video is hidden the image will show.

Downside, and it is a big one…. The video has the preload attribute set, so at a guess the video still buffers when not displayed. Which will use peoples data on mobile, even though it doesn’t play the video.

The other option is using javascript to kill the element entirely if the user is on a mobile device.

4

Thanks I’ll try this too - I’ve used a class i created and tried it that way as I’m doing now but not that exact class you have mentioned.

5

So what I have done everyone as had a good play around and for now, I have took the menu out of the hero and put this in the global only and put negative margin on the hero bloc.

The menu now at least is sticky thoughout and made mobile only breakpoint with a image and not video!

just need to sort out one more issue and we could be ready to launch Monday/Tues this week !