Topic: Revolution slider not working on mobile.

Author

Posts
August 27, 2014 at 8:38 pm #93646

Buckles
Participant

I am working on a site locally so I don’t have a url to give to you, but you can use your own url http://theme.co/x/demo/integrity/1/

I used the Integrity 1 demo and it looks perfect on my laptop, however I noticed the slider doesn’t work on mobile devices, so I tried to pull theme.co’s Integrity 1 on my device and I get the same thing. What gives?

August 27, 2014 at 10:19 pm #93677

Christian
Moderator

Hey Buckles,

Can you give us more details about the issue? It is working fine on our end.

Thanks.

August 29, 2014 at 2:47 pm #95029

Buckles
Participant

This reply has been marked as private.

August 29, 2014 at 3:48 pm #95062

Rad
Moderator

Hi there,

1. Works fine in my view both laptop and larger screen, would you mind providing your screenshots?

2. Accordion works on mobile too.

3. And yes video is not working with mobile. Videos on mobile have to autoplay, simply because of data charges it can cause without user consent. Then they must play it to view the video.

My findings :
1. You’re using youtube video and it’s using iframe, some browser have issues with crossdomain embedding and it will throw error. Try self hosted video at your slider.

2. The is a javascript error originating from revolution slider scripts, would you mind reinstalling it?

3. You added css at body class which shouldn’t be, now your classes are broken because of this. Please use classes at body class only, and css at customizer’s custom css.

<body class="home page page-id-3034 page-template page-template-template-blank-4-php x-integrity x-integrity-light x-navbar-fixed-top-active x-boxed-layout-active x-content-sidebar-active x-post-meta-disabled media="all" pre { display: block; padding: 0.786em 1.071em; margin: 0 0 1.313em; font-size: 1.15em; line-height: 1.7; /* word-break: break-all; */ word-wrap: break-word; white-space: pre; white-space: pre-wrap; border-radius: 4px; } wpb-js-composer js-comp-ver-4.1.3 vc_responsive x-v2_3_0 x-shortcodes-v2_3_4" cz-shortcut-listen="true">

Thank you.

August 29, 2014 at 11:27 pm #95200

Buckles
Participant

1. Works fine in my view both laptop and larger screen, would you mind providing your screenshots?

2. Accordion works on mobile too.

3. And yes video is not working with mobile. Videos on mobile have to autoplay, simply because of data charges it can cause without user consent. Then they must play it to view the video.

My findings :
1. You’re using youtube video and it’s using iframe, some browser have issues with crossdomain embedding and it will throw error. Try self hosted video at your slider.

2. The is a javascript error originating from revolution slider scripts, would you mind reinstalling it?

3. You added css at body class which shouldn’t be, now your classes are broken because of this. Please use classes at body class only, and css at customizer’s custom css.

<body class=”home page page-id-3034 page-template page-template-template-blank-4-php x-integrity x-integrity-light x-navbar-fixed-top-active x-boxed-layout-active x-content-sidebar-active x-post-meta-disabled media="all" pre { display: block; padding: 0.786em 1.071em; margin: 0 0 1.313em; font-size: 1.15em; line-height: 1.7; /* word-break: break-all; */ word-wrap: break-word; white-space: pre; white-space: pre-wrap; border-radius: 4px; } wpb-js-composer js-comp-ver-4.1.3 vc_responsive x-v2_3_0 x-shortcodes-v2_3_4″ cz-shortcut-listen=”true”>

I’m not sure I understand what you mean for #3. In the accordion there’s a word break and I want to eliminate that. If there’s an easy way of doing this please give me the proper css and instructions where to insert it. As for #2 are you asking me to reinstall the Revolution Slider plugin?

August 30, 2014 at 8:25 am #95283
Christopher
Moderator
Hi there,

Please add the code below into Customize -> Custom -> CSS:
```
@media (max-width: 480px) {
	.x-accordion-heading .x-accordion-toggle.collapsed,
	.x-accordion-heading .x-accordion-toggle {
		font-size: 12px;
	}
}

@media (max-width: 370px) {
	.x-accordion-heading .x-accordion-toggle.collapsed,
	.x-accordion-heading .x-accordion-toggle {
		font-size: 11px;
		padding: 15px 5px;
	}
}
```
This will take care of Accordion titles breaking into lines.

I will need a user/pass with Administrator Role to be able to surf around plugins that you have and try to deactivate them and see if the Javascript conflict is a source for problem that you are experiencing.

Thank you.
August 30, 2014 at 12:52 pm #95405

Buckles
Participant

This reply has been marked as private.

August 30, 2014 at 2:51 pm #95433

Buckles
Participant

This reply has been marked as private.

August 30, 2014 at 5:55 pm #95473

Rad
Moderator

Hi Buckles,

Sorry for the confusion and typo error. I meant it will not auto play in mobile.

It will play the video on mobile upon user consent, like clicking or tapping it. But it will never auto play on mobile.

And you can’t use online mobile simulator for testing, it simply simulate the width but not the features of actual devices.

Navbar starts at the half point of the screen.

Where do you need your navbar starts? Your navbar position is based on resulting height of your slider. The more it change, the more navbar move too. Your video aspect ratio is in landscape which gives less height when viewed on smaller screen. If you wish to push the navbar more than half point, then use portrait video.

Currently, the login you gave has no slider permission. I would like to reproduce another slider for testing. The video loads and play when I tap it faster before the black element overlay on top.

Thanks.

August 30, 2014 at 6:42 pm #95481

Buckles
Participant

Thanks for clearing the autoplay situation up. As far as the simulator goes, I only showed you the simulator to show you what’s actually appearing on my mobile phone.
As for the navbar, I’m trying to reproduce the same result as your X site “http://theme.co/x/”. Navbar set perfectly on the bottom both on pc and mobile.

You can try using the same credentials to get in.

August 30, 2014 at 9:44 pm #95549

Rad
Moderator

This reply has been marked as private.

August 31, 2014 at 4:46 am #95657

Buckles
Participant

I’m using a self hosted video (mp4), but on an iphone you can see the player but there’s an image of the play button (crossed-out) and video won’t play. Also, you never mention anything about the navbar at the half way point as opposed to being flushed on the bottom of the mobile screen.

August 31, 2014 at 5:00 am #95658

Christopher
Moderator

Hi there,

The MP4 format codec is so important in mobile devices. It seems that you use a wrong codec of MP$ format. Please follow the link below to see the supported formats for IOS devices:

https://developer.apple.com/library/safari/documentation/audiovideo/conceptual/using_html5_audio_video/Device-SpecificConsiderations/Device-SpecificConsiderations.html#//apple_ref/doc/uid/TP40009523-CH5-SW9

For the Navbar menu I should say that we do not support fixed menu for mobile devices as it occupies so much space on limited mobile screens.

To do such a thing I suggest that you follow up the link below:

http://theme.co/x/member/forums/topic/fixed-top-navigation-on-tablet-mobile/

Thank you.

August 31, 2014 at 1:33 pm #95810

Buckles
Participant

Since I can’t get video to play on mobile phones this project has pretty much been a bust for me. So my last request is for you to explain how to get the Video Poster Image (For Mobile) to work, because for some reason I’m still seeing an inoperable video player on the screen. And yes I cleared my cache.

August 31, 2014 at 3:23 pm #95865

Rad
Moderator

Hi Buckles,

That because not all mp4 format are supported by IOS, please check these :

https://confluence.atlassian.com/display/CONFKB/Unable+to+play+embedded+Mp4+videos+on+iPad+or+iPhone+in+Confluence

http://stackoverflow.com/questions/3285529/iphone-cannot-play-mp4-h-264-video-file

Let say video on iphone has size requirement.

Your video works and playable on android ( though have to wait before it plays, the video is big )

My suggestion is using hiding the slider on mobile, and showing content band with smaller video for mobile using X visibility shortcode below the menu. That way menu on mobile will sit on top which is common on mobile for easy navigation.

Thanks.
Author

Posts