Background video has to work on mobile

Support
#1

Hey. I saw almost every topic here about this “issue” with mobile video background. People want you to help with it, but you like don’t want. And i understand your point. I have specific task and i need to show video background on mobile. I’m testing video loops about 1-3 MB so it should be not so hard for mobile browsers today to show me what i want on the page.

Here is my site https://orangereya.today.

It has now video background for desktop and ipads. You should help me with mobile background. Don’t say, please, as you do always about slowing down and so on (" Background videos especially in iOS Safari browser are disabled on mobile and bla bla"). With others themes i did the trick in seconds. But with PRO i spent almost a week trying to show up my idea with video background on mobile and nothing. I don’t want to change theme because i’m with you from 2017 and i like what you doing, but not with this.

I’m using old version of pro 3.2.3. I think t’s not a problem for this case.

Please help with any code for mobile video background. I’m very tiered to search the solution.
Thank you.

2 Likes
Mobile Video only showing on Android Devices
#2

Hello @vdvortsov,

Thanks for writing in!

Video backgrounds are not available on mobile devices by default (tablets and phones): most of the users are not happy you start a video streaming that consumes the monthly traffic or device battery for a visual background effect: this is a note as a best practice in web development . Note also that not all mobile devices support autoplay videos background, although it’s recently supported by the major mobile devices (recent version of iOS and Android).

With the X and Pro theme, video backgrounds are still disabled by default. Perhaps, you can check out this old thread instead:

Note: We are unable to provide support for customizations under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

1.) If you’re not planning to overlay an element in your video, you can use the Video element. I just tested it and it auto-plays on my phone provided the video is muted as required by modern browsers.

image

2.) To make a fast-performing site on mobile, you can also use a GIF image as your poster image.

Best Regards.

#3

I checked it with another theme and there is background video looking absolutely fine on mobile, especially on ios. So i don’t understand why you can’t help me.

Thread “Playsinline tag on video” did’t help me too. Nothing changes. And GIF is not my choice. Also i planning to overlay an element, so Video Element is not for me too.

#4

I use video background in header as full screen video (now on main page) with text element overlaying. So i can add custom ID (“videoback”) only to Bar, not to a video element.

Also i add to JS the next code: jQuery(window).load(function(){ jQuery(’.videoback video’).attr(‘playsinline’,’’); });

Now it seems like to work, but with strange behaviour. After first loading of the page there is only cover jpg. But if i leave browser and go back, video background will be shown. I recorded this from iphone screen.

Check the video: https://youtu.be/752au8a35To

#5

Hello @vdvortsov,

if you refer to this thread: Playsinline tag on video, your code should be:

(function($){
  $('.videoback video').attr('playsinline',''); 
})(jQuery);

And please use the background video to the lower or upper layer only. Do not add in both layers.

Kindly let us know how it goes.

#6

Yeah, it’s was my tests)
But the fun fact is almost working solution is

jQuery(window).load(function(){ jQuery(’.videoback video’).attr(‘playsinline’,’’); });

If i do only

(function($){
$(’.videoback video’).attr(‘playsinline’,’’);
})(jQuery);

It doesn’t work.

The first code work on iPhone 12 (ios 14), but doesn’t work on iPhone 6s (ios 13). The second code doesn’t work anywhere. I don’t understand these difficulties because i use multisite wordpress and second theme inside of it supports background video absolutely fine on every device. What’s wrong with PRO?)

Video background on mobile workaround
#7

Hey @vdvortsov,

This is a bug and our development team is currently looking for a solution. Regretfully, there’s no temporary solution to make this work on iOS 13 and greater.

Please stay tuned for updates.

#9

Hey @christian,

I’ll wait for this solution .
Will you put it here or somewhere esle?

#10

I saw your question to my own post regarding the same problem, but that thread seems to have been deleted so I can’t reply. (It also ended with the support personell saying it’s a confirmed bug and it’s on the list.)

You asked what I did to make it work. I note that some older versions of the Edge browser didn’t zoom the video as it should (haven’t confirmed with newer versions) but you can have a look here:

www.birdy.se

The code in use is:

Global CSS:
    .videocontainer {
      width: 100%;
      height:700px;
      overflow:hidden;
    }
    #videobg { 
          -o-object-fit: cover;
             object-fit: cover;
      object-position:50% 0;
      width:100%;
      height:100%;
    }

.ontop {
  position:absolute;
  top:0;
  width:100%
}

And on the page in a standard text-block I have used this code for the video:

<div class="videocontainer">
	<video autoplay muted loop playsinline id="videobg" poster="/wp-content/uploads/2019/05/videobg-c.jpg">
		<source src="/wp-content/uploads/2019/05/bgfilm-hemsida2.mp4" type="video/mp4">
	</video>
</div>


<div class="ontop">
	<div class="x-container max width offset">
		<div class="content">
				<div class="floatcenter">
					<h2 class="h2">Vi filmar och designar webbsajter</h2>
				</div>
		</div>
	</div>
</div>

If anyone has some suggestions on how to improve this, please chime in.

(And I really hope Theme X will make background-video work also for iPhone anytime soon.)

Best,
Petter

#11

Hi Petter,

Thanks for chiming in and for sharing the information.

Cheers.

#12

Hello,

Just been looking for the same solution, has there been any news on the solution?

Cheers

#13

Hey @Maratopia_Digital,

You can check out the solution shared by @birdycom in his post above.

Thanks.

#14

Hey @ruenel,

What I was trying to ask is if this will be a fixed from a native level and not need to add the extra HTML and CSS. It seems a bit weird that the video background is not support for safari on iPhone being that they are a hugely popular combination.

Is there plans for this to be implemented natively or do we have to rely on custom coding here?

Cheers,

#15

Hello @Maratopia_Digital,

As Christian has mentioned in his response that it is a bug and our development team has been informed. 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.

#16

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.

#17
#18

@birdycom Oh yes this is the best! Thank you so much, works like a charm. Since you are a code wizard, have you found a way to autoplay the video on iOS mobile on battery saving mode? That’s the only issue I’m facing anymore and was wondering how to fix that, if possible.

#19

Hey Minna,

It is best that you send @birdycom a private message. He may not be monitoring this thread anymore.

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third-party developer.

Cheers.

#20

Hi @christian, any updates on this issue? I understand the need since I also have clients who prefer video bg over performance even if is not a best practice. Thanks.

#21

Hi Diego,

Unfortunately, there is no news on this till now. Our development team is still investigating this.

Thanks