Video Background not playing on mobile verson of my website.

[eo1n]

Video Backgrounds are just static images of the first frame on mobile. Why is that? I have a business subscription and am using the Slick theme (proudbears.com). 

[bobafett]

I believe that is the nature of mobile sites.  I believe they can not play video as a background.  I could be wrong though.

Even if played, you visitors will hate you for it....people don;t like to burn data or wait long time for a video to load.

[Queso]

That would be by design, yes. I can't speak for the development process, but personally, I think it could seriously eat up a mobile user's data, so I'd recommend against relying on video for mobile users in general.

[Weston]

I disagree, What kind of data does a 3 to 20 second video consume? 1-5 MB? Big deal....

[MiamiVice]

Weebly has become an absolute joke. Forum after form, post after post, year after year, hundreds of weebly users are asking over and over again for the same basic features for their website and time after time Weebly just ignore them. 

People have been asking for video backgrounds on mobile since 2016 and its now 2020 and weebly still haven't done it, and worse still there aren't even any simple work arounds. 

Auto video play is another feature, as are customisable shopping buttons. 

[umarayaz8]

please tell me which weebly theme you have used

[eo1n]

thanks @bobafett and @Queso! I will have to come up with something else as the video looks pretty cool on desktop... Maybe a still frame from the middle of the video at the beginning...

[grao91]

There's a simple HTML fix for this that I managed to implement on my website:

in CSS

1. Create a clone of the banner-wrap in every instance and sub-instance.

2. in the first instance of the cloned banner-wrap, add a background-image of your choice (it has to first be uploaded into the assets)

3. in every "@media", set the original banner-wrap to display: none, and every cloned banner-wrap as display: block. inversely, call the orginal banner-wrap in every "@media" and set them to display:none.

in HTML

1. Clone the original banner-wrap in a new div just under the original, and delete the header and content php ( everything that has {}s)

2. manually add any overlaid text or other content on your header << I think weebly's php content breaks when called a second time...

These steps effectively prevent the video from showing in every non-desktop format...someday i'll go back into the code and update to most resolutions including portrait/landscape modes on mobile devices...

[choyceofarts]

i read this 5 times and i still dont understand lol 

[Paras]

I appreciate your answer can you guide us all by putting your instructions into steps. That could be very helpful to understand. Thanks a lot for making efforts to fix the problem.