How to change to Gif only on mobile view but show Video for Desktop/ laptop and Tablet view?

Hi i just want to have a video for my desktop, laptop, and tablet then change to a gif for anything smaller. I heard the background video doesn’t work well on mobile but when i try to only add a Gif to the mobile view it shows up on everything. How do i fix this?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Visibility of an element within a breakpoint is controlled by the Display property. See →

Normally you just set the display to none of an element on desktop then display block on mobile.

I actually figured it out right after posting this lol but thank you that video help me understand it a lot better!
While you’re here. I’m trying to add a video in the background to post content over top for the home page But the background video won’t work for mobile and mobile is very important for me. So I used A GIF For mobile like some suggested but I can’t seem to put content over the GIF which is also very important for my site. Lol so you see my dilemma? How can I solve this issue without using Vimeo?

Normally one would use absolute positioning and then stacking with z-index to position elements on top of other elements. Here is a video tutorial that explains it.

1 Like