Background video has to work on mobile

[achievestudio]

Hi, just seeking for an update, is there a way to escalate this issue to a higher priority item? Thanks…

[ruenel]

Hey Diego,

We have bump the issue tracker to follow up on the issue. Please be advised that we do not have an ETA yet on the release or that this fix will be available in the next release. You can check out the latest news and updates from out Twitter and Facebook page.

Please bear with us.

[apparatus]

I’m also very frustrated at this issue. I understand the desire to improve user experience by not downloading large videos on mobile, but there are very specific cases where developers need the ability to do this. Not having the ability to override your safety measure is disappointing at best. Please escalate this fix so developers can build in your platform as this is marketed as a professional theme, not consumer level.

[marc_a]

Hey @apparatus,

We are really sorry for the inconvenience! This issue is still in a queue in our tracker but rest assured that our developers will look into the said issue. We cannot make any promises at this stage. And since this is a bug, it will be fixed by the development team. We do not have an ETA though.

Thank you for your understanding.

[achievestudio]

Hello Themeco team, any updates on this feature? this is a request that it’s been gaining traction from several clients lately. Please help

[christian]

Hey Diego,

There’s no update yet. We would certainly help if there’s a simple workaround. But, there’s none.

Please stay tuned.

Thanks.

[antonsiedlecki]

UPDATED

Hey everyone,

here is an easy way to tackle this that I found works for me.

the reason why we cannot add playsinline to the video is because at the time the page is created, its within a script template, so the video doesn’t actually exist yet, but we can edit the template before it gets generated.

You can add this code to your Global JS, and it will run everywhere there is a video and inject playsinline

// Force the Hero Video to PlayInline
const $videos = [...document.querySelectorAll(".x-video.player script")];    
$videos.map( video => {
    video.innerText = video.innerText.replace(" muted>"," muted playsinline>");
});

Best, Anton

[prakash_s]

Thanks for sharing the information Anton.

[Thaelys]

Good afternoon everyone,

I m not sure if i understood the problem correctly, but i really don’t know why you are all complaining.
The fix is very easy :

1/ Create a Grid instead of Row / column element.
2/ Give that grid two layers overlapping each-other.
3/ The top layer can display your content as usual.
4/ The bottom layer should receive a video element, with playinline.
It works perfectly on mobile, plus you can achieve way more complex design with that grid element.

Even easier :
1/ Within the section, create a DIV, put the video element on it. Make sure the Z-index of that div is less than your Row. End.

@achievestudio

Come on guys, I agree with everyone, why is it so f##king hard to do this? I had to go trough the embarrassment of trying to explain clients why it works on their crappy wix sites and not in Pro, this is not a bug is just basic functionality, I’ve been searching for ages on this issue and the answer is always pretty much “Use a poster image because we think is better” Is not about what you believe, is about what we need to get done.

If you need to get something done, maybe try a bit more instead of complaining against a tool that is providing such high-end webdesign.

Cheers,

[marc_a]

Hey @Thaelys,

Thanks for sharing your ideas, we really appreciate it!

[achievestudio]

We all purchased a service and our voices as customers of this platform need to be heard, is not about complaining, is about not taking into consideration any of the users requests for basic features. What’s the purpose of making updates to the product if in the end is not able to meet very basic functionality for a high-end development tool? Also the lame excuses and support by just saying “Video is not optimal for mobile just use an image” as much as that’s true we shouldn’t be told to just do things the way they feel like. Is a matter of saying we are not providing that basic feature, that way we could make a decision where to put our money.

In any case thank you and everyone for helping, sorry for the rant but I’ve been so annoyed by this issue that I guess the workaround will do.

[marc_a]

Hey @achievestudio,

We’re sorry for the inconvenience but we’re glad that the workaround works properly on your end.

Thank you for understanding.

[AnthonyLee]

@Thaelys

but i really don’t know why you are all complaining

I understand you might be frustrated, but your approach may not be so intuitive to everyone. I recommend holding off on comments like this in the future.

“If you need to get something done, maybe try a bit more instead of complaining against a tool that is providing such high-end webdesign.”

It is high-end web design / development. While agree with your sentiment, I think you should reconsider your tone for a web forum (especially one we are all invested in) and be more respectful.

[sam_futr]

Hey guess what @thaelys

@Thaelys

1/ Create a Grid instead of Row / column element.
2/ Give that grid two layers overlapping each-other.
3/ The top layer can display your content as usual.
4/ The bottom layer should receive a video element, with playinline.
It works perfectly on mobile, plus you can achieve way more complex design with that grid element.

Even easier :
1/ Within the section, create a DIV, put the video element on it. Make sure the Z-index of that div is less than your Row. End.

Unfortunately, none of the above works if you want to set your video as a Background to force zero margin gap across all device screen sizes.

Which was mentioned in line 1 of this thread:

@vdvortsov

I saw almost every topic here about this “issue” with mobile video background.

See Video Background usage in Row one below, and your option in Row two:

Note - the same gaps can apply on mobile.

So yeah, to second @TonyBear , maybe it’s not just “try a bit more instead of complaining” and maybe its understanding, in full, the actual issue at hand.

[sam_futr]

Hi @ruenel

@ruenel

Video backgrounds are not available on mobile devices by default (tablets and phones)

This isn’t totally accurate. The background videos do play by default on Android phones using Chrome Mobile. I have tested on my own Pixel 6.

Can we please get an understanding as to why they do not play on iPhones, but do so on Android, via the Pro framework?

Realistically, this issue should’ve been resolved by now. If the required result is correct on some devices, but not on others, then it’s up to the Pro Dev Team to resolve across the remaining devices you’d think? We currently have an end-result that is essentially 60% of the way accurate, and it’s been like this for a while now.

Thanks
Sam

cc/ @christian

[Thaelys]

Hello !

Unfortunately, none of the above works if you want to set your video as a Background to force zero margin gap across all device screen sizes.

We are talking about mobile screen size. As i understand it, and i may be wrong, but you are free to use the standard background video thing for your column/row when you are not on mobile.

Now i’m not sure what you want to achieve, but are you trying to keep the two column aspect within a mobile device ?

Is this what you want ?

Regards

[ruenel]

Hi @Thaelys,

Thank you very much for chiming in and for taking some time to share on thoughts about the background videos.

Cheers.

[antonsiedlecki]

It can play on iPhone so long as it’s iOS 10 and above which supports playsinline video attribute.

In your video tag do the following
<video src=“video_url” muted autoplay loop playsinline />

You will notice your video plays on iOS.

Reference

• https://webkit.org/blog/6784/new-video-policies-for-ios/

[ruenel]

Hey @antonsiedlecki,

Thanks for this information.

Cheers.