Background Video on iPad 4

Community resources Bugs
1

Hi guys! I’m having some issues with a background video. I’ve added in custom code for it to now appear on mobile and that seems to have solved most of the problem, however the video still isn’t appearing on iPad 4 iOS systems, neither portrait or landscape.

Any insight on this?

Here is my site Read-Only: Webflow - Waveforce Landing Page

2

I worked on a similar issue before. Which iPad browser(s) are you using? I did something similar to simulate kiosk like experience where user touches the screen then BG video autoplays. Most Apple devices firmware prevents autoplaying videos on page load for most browsers. However you can make an invisible full screen button trigger the video. This requires tweaking custom script on your BG video element.

<script>

	$("#sound").on('click', function (){
		if( $("video").prop('muted') ) {
		      $("video").prop('muted', false);
		} else {
		  $("video").prop('muted', true);
		}
	});

</script>

I’ll let you know when I find the other code for autoplaying on Tablet device.

Another Solution I used was loading BG Div Block with full size WISTIA player set to auto play on interaction. this might work with Youtube, and VImeo as well, but it still requires user to touch somthinge on screen.

Also try out this solution in a custom BG div block with Z set to 0 and position set to absolute:

3

Hi, @Sam_Schwinghamer!!

I’m happy to help with this. Can you let me know what version of iOS that iPad 4 is running?

4

Hey Riley!
Thanks so so much, I’m being told it’s iOS 7-10 on both Safari and Chrome. I’ve now removed the overlay from the video and hoping that helps but unable to test myself. Any insight is greatly appreciated!! :slight_smile:

5

Thanks for that update, @Sam_Schwinghamer!!

I’m looking into this, and I’ll let you know as soon as I have more information! :D :webflow_heart:

6

Ok, @Sam_Schwinghamer! One of our engineers (the absolutely amazing @forresto) shared this resource with me! :smiley:

It looks like this is just a limitation of iOS. If you do a quick google search you’ll find a lot of people running into this same issue no matter what tool they’ve used to build their site.

It may be worth not using the BG video element on touch devices. 10 and higher should work, depending on what the user has set regarding “restricted data mode.”

Let me know if you have any other questions and I’ll be happy to assist you further!

7

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