Background Image GIF not appearing on iPad Landscape

Design help General
1

2048×1536 109 KB

Here is my public share link:
https://preview.webflow.com/preview/massivedynamic?preview=9cd5dbcf6c2dad545c68ed71cba08366

2

That’s because it’s not a GIF; it’s an MP4 video. Here’s the source code you’re using:

<video autoplay loop style="height: auto; width: 100%; position: fixed; left: -27%; top: -180px; min-width: 140%; min-height: 140%; width: auto; margin: auto; height: auto; z-index: -100; background-size: cover; overflow:hidden;">
  <source src="http://jprim.com/videos/studioxo2.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">
</video>

Video autoplay isn’t supported on iPad (since iOS 6.1) or iPhone (since long before that). This is built in to tons of mobile devices to prevent battery drain and unintended data usage.

3

Thanks! There’s a GIF behind it which I was using for mobile and tablet. I’d like for the GIF to show on the iPad mobile too (rather than black) if that makes sense. And the video to play on web like it is.

1 Like
4

Gotcha. Well landscape iPad is above the breakpoint for tablet width, so it’s using your Desktop styles instead.

Have you considered adding the GIF as a poster attribute on the video element? If you publish the site to a .webflow.io link, we can play with it a bit more, but we can’t test in iPad with the public share link.

<video poster="http://YOURURL.com/YOURGIF.gif" autoplay loop style="height: auto; width: 100%; position: fixed; left: -27%; top: -180px; min-width: 140%; min-height: 140%; width: auto; margin: auto; height: auto; z-index: -100; background-size: cover; overflow:hidden;">
  <source src="http://jprim.com/videos/studioxo2.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">
</video>

More about the poster attribute: HTML video poster Attribute

1 Like
5

Thank you again! The webflow.io link is here:

http://www.massivedynamic.webflow.io

How do I add the poster attribute?

6

I already included it in the sample code that appears in the post above. :smile:

7

I added this code with the correct image links to the head code in the settings and it still doesn’t work on iPad landscape. Any thoughts?

8

Can you share a link to the GIF? :smile:

Edit: Also, the video load is insanely slow. I recommend uploading to Vimeo or another video hosting service for hosting the MP4. They will also optimize for quick streaming. It is 186 MB. That is HUGE. :dizzy_face: Way, way, way, way too big.

9

http://uploads.webflow.com/54bda6e6a11c04574c8b53b8/56bb6a8323ac054969ba0edc_glitch_slow.gif

Yes, good to know with the video - thank you so much! What is the best way to play vimeo on autoplay in the background for Webflow and without showing the player controls? Sorry for so many questions - you are the best! :slight_smile:

10

Not a problem—I’ll need to look into that for you. :blush:

1 Like
11

Hi McGuire - would you be able to help with this? Thanks!

12

Hi McGuire or anyone else - Any thoughts? Thank you!

13

Checking back in on this - thanks!

14

Hi @jprimiani, one thing I noticed, the background image was set to tile, you might want to turn that off and see if that helps

15

Great thank you - will check it out!

16

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