Background video is supposed to show well in tablets and smarphones?

I created a background video in my website but it doesn’t show in tablet or smarphone. Is this a feature that is not compatible with mobile devices? or what do I have to do to make it show on mobile devices??

Thanks!

Can you paste here the code you’ve used for you video background?

<video autoplay loop style="width:100%; height: auto; position:relative; z-index: 0;">
<source src="http://syddev.com/jquery.videoBG/assets/tunnel_animation.mp4" type='video/mp4' />
<source src="http://syddev.com/jquery.videoBG/assets/tunnel_animation.ogv" type='application/ogg' />
<img src="http://syddev.com/jquery.videoBG/assets/tunnel_animation.jpg">

Try adding a line for the webm format. Also I don’t know why your OGG line is set to typ “application”. Try using these sources lines: (yes the webm format exist on the syddev site)

<source src="http://syddev.com/jquery.videoBG/assets/tunnel_animation.mp4" type='video/mp4' />
<source src="http://syddev.com/jquery.videoBG/assets/tunnel_animation.ogv" type='video/ogg' />
<source src="http://syddev.com/jquery.videoBG/assets/tunnel_animation.webm" type='"video/webm"' />

Hi, thanks Vincent. It is still not showing on tablet and smartphones. I am using your code.

Can you please share your project’s public link so it’s easier to understand your issue?

Learn how to do it here: Share a read-only link | Webflow University

Here’s the public link. Thanks!! Check it in tablet and smartphone and you will see what I mean.

https://webflow.com/design/ninjanutz?preview=f78d32eae192d7dcf98de89df77f9633

EDIT: By the way, the navbar is completely crazy and moving out of its place when you scroll through the page, and the background image from the top disappears when you scroll down. Could you also help me with that??? I think the background video is messing with the code or something is screwing up the code.

Thanks!

So, anyone can help me with this??? Please?

Hi @aerismel, Background video with autoplay is not supported on most, if not all Tablets and Smartphones.

This is a limitation of the mobile OS, not Webflow. If you notice in the background video tutorial, there is a place where you link to a static image:

<img src="http://syddev.com/jquery.videoBG/assets/tunnel_animation.jpg">

This image is used as the fallback image on mobile devices or devices where the background video with autoplay is not supported.

I hope that helps, cheers, Dave

3 Likes

Sorry, been away. @cyberdave provides a good answer. I personally never plan background video for mobiles, it’s too much of a big gun/data for the mobile experience. Instead, I craft a nice and light animated GIF that I use as a background for the mobile devices.

1 Like

Thank you for your response.

Can you please check the issue with the navbar? It moves out of place when scrolling through the page.

Thanks for your help!

Thanks!! I will do this then, but could you tell me where to add this code??

Thanks!

I really need help with the navbar problem… Please help… Thanks!

Hi @aerismel, sorry I think the navbar issue got overlooked with the conversation on the bg video. I will look at that navbar and then report back what I can find :smile:

Cheers, Dave