Video Background on Mobile Pages Doesn't Auto Play

Hey There,

I've installed parrot on this website. Just to play around with it and get to know the WPMU Dev products.

Now when i check this page on my iPhone (4s) or iPad (Air 2) the video background (vimeo) doesn't auto play, but on my macbook air it does.

When i visit that page on mobiletest.me.. It does auto play. Could you please tell me how to let it autoplay on mobile devices?

Another point: On mobile pages it shows the Vimeo logo, on the macbook it doesn't show this.

Best Regards,

Freek

  • Adam Czajczyk

    Hello Freek,

    I hope you're well today and thank you for your question!

    Currently it's not possible to get website video auto-play in iOS. This is not related to Upfront (or its child themes) but rather to Apple's design decisions:

    In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. (...)
    …autoplay is disabled to prevent unsolicited cellular download.

    [see here: https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html]

    You may be able to work it around by setting "auto-played" GIF as background instead video but I haven't tested it yet so that's just an idea. Video's will not work however that way.

    When i visit that page on mobiletest.me.. It does auto play.

    That's because it's an emulator running in your browser and it's not 100% accurate. The better way to test for mobile devices may be to use "Ripple" for Chrome browser:

    https://chrome.google.com/webstore/detail/ripple-emulator-beta/geelfhphabnejjhdalkjhgipohgpdnoc

    However as it's targeted mainly in HTML5 apps and not "regular websites" it may also be not accurate enough. Therefore conclusive tests would be those performed with real devices.

    Another point: On mobile pages it shows the Vimeo logo, on the macbook it doesn't show this.

    I'm not sure if I understand that correctly. Are you referring to Vimeo logo (graphics) overlay on video player or to some "tool icons" that e.g. would let you share video? Please advise!

    Best regards,
    Adam

  • Verschuren

    Hi Adam,

    Thank you for the quick reply and for your time.

    1.) About the auto play video background:

    I Believe it's not just iOS, i've just tried a Galaxy S4 and on there it doesn't play aswel.

    2.) Logo:

    The logo, shows up there aswel. It's the vimeo logo, but i think thats just because vimeo embedds that logo. (if i'm correct).

    But i guess when it's resized to the format displayed on the macbook, the logo is there, but not visible because it's out framed (or however it's called)..

    3.) Mobile and normal version

    I've got one more question: Is it possible to change the mobile site in a way that the desktop version does not change. When i edit the text on the mobile version for example (from centre, to left) it changes on the desktop version aswel.

    Sorry for all the questions..

    Best Regards,

    Freek

  • Adam Czajczyk

    Hello Freek!

    I Believe it's not just iOS, i've just tried a Galaxy S4 and on there it doesn't play aswel.

    I admit I wasn't aware of that despite the fact I'm using Android system from time to time. The iOS issue is a known issue but I searched the net and found out that there are indeed issues in Android as well. It would probably needs some "hacks" and a video that's encoded especially for it. If you do have direct access to a video file you could give it a shot and try re-encoding it as described here:
    https://www.broken-links.com/2010/07/30/encoding-video-for-android/

    Please note though that I haven't tested this yet.

    The logo, shows up there aswel. It's the vimeo logo, but i think thats just because vimeo embedds that logo. (if i'm correct).

    Agreed, I think you're right about it.

    I've got one more question: Is it possible to change the mobile site in a way that the desktop version does not change. When i edit the text on the mobile version for example (from centre, to left) it changes on the desktop version aswel.

    I'm not quite sure if I'm following you on this one. I assume you're referring to an Upfront editor in "Responsive" mode ("mobile" view), is that right? Could you please elaborate a bit on this? Some screenshots (or a simple video) would be of great help here.

    Best regards,
    Adam

  • Verschuren

    Hi Adam,

    Thanks again for your response.

    I'm not quite sure if I'm following you on this one. I assume you're referring to an Upfront editor in "Responsive" mode ("mobile" view), is that right? Could you please elaborate a bit on this? Some screenshots (or a simple video) would be of great help here.

    Yeah that's right, when i'm editing a page in responsive mode ( for example, an image that doens't look good in mobile or tablet version).. It will change the appearance of the desktop version aswel.

    Is there any way that this will not happen?

    Best Regards,

    Freek

  • Adam Czajczyk

    Hello Freek,

    Thanks for clarification on this one.

    This is something our developers are still working on. At this moment the same images are used for "responsive" and "regular" view. One option to deal with it would be to give following "workaround" a try: clone the region (the one that includes some elements that you edit for "mobile only" view), design that region to look good in mobile view and then switching between "mobile", "table" and "desktop" view (still in "responsive" mode) hide/show it for selected view (a little "eye" icon).

    Best regards,
    Adam