Tagged: 

Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • March 27, 2017 at 12:18 pm #767366
    richardwilding

    Dear Kriesi,

    On the home page of my website (link below) I have a video playing inside a full width easy slider. This works fine on my laptop, and on mobiles the fallback image displays correctly.

    However, on an iPad Pro using Chrome and Safari, there is a glitch with an extra image appearing top left next to the main image.

    Do you know what is causing this and how I can fix it?

    Thanks, Richard

    March 28, 2017 at 2:19 pm #768150
    Yigit

    Hey Richard,

    I am not able to reproduce the issue using an emulator. I will ask my teammates to check your website. Please kindly wait to hear from them

    Best regards,
    Yigit

    March 30, 2017 at 8:53 am #769347
    richardwilding

    Thank you Yigit

    March 31, 2017 at 2:21 pm #769962
    richardwilding

    Hi Yigit,

    I am including a link below to a screenshot showing the problem on iPad.

    The full width easy slider should display the video right across the width of the page, and does so on the laptop and iPhone. But on the iPad it displays the video narrower, and what looks like the fallback still image to the top left.

    I hope we can find a solution ASAP.

    Thanks, Richard

    April 3, 2017 at 11:09 pm #771425
    richardwilding

    Dear Kriesi,

    Are you able to update me on this issue with the Full width Easy Slider incorrectly displaying both the video and fallback background image side-by-side on the iPad (safari & chrome) as shown in my screenshot?

    This one issue is stopping my client from signing off on the project

    Is there an interim fix such as hiding the fallback background image on iPad in css?

    I really hope you can help

    Thanks, Richard

    April 5, 2017 at 5:37 am #772183
    Ismael

    Hi,

    What is the actual model of the iPad Pro where you’re testing this? We need to know so that we can test it on the right device. Please try this in the Quick CSS field.

    @media only screen 
and (min-device-width : 1024px) 
and (max-device-width : 1366px) { 
  /* STYLES GO HERE */
  .av-video-slide .mejs-mediaelement {
    display: none !important;
  }
}

    This should remove the video on iPad Pro devices.

    Best regards,
    Ismael

    April 5, 2017 at 10:15 pm #772857
    richardwilding

    Thanks Ismael,

    Should I ask them whether it is the 12.9″ or the 9.7″ model?
    Is there anything else about the specification that has a bearing on this?

    They had the same problem on both Safari and Chrome on the iPad Pro

    Thanks, Richard

    April 6, 2017 at 9:33 am #773041
    richardwilding

    Hi Kriesi,

    We’ve seen the issue on both the iPad Pro and the standard iPad when used in landscape mode.

    Rather than disabling the video on iPad, how can I disable the fallback image, so that just the video is displayed?

    Thanks, Richard

    April 7, 2017 at 3:46 am #773645
    Ismael

    Hi!

    We need to know the actual resolution of the device so that we can provide the correct css media query. The video is not going to play on the device so you have to disable it. Is the css code working?

    Regards,
    Ismael

    April 10, 2017 at 1:37 pm #775456
    richardwilding

    Hi Kriesi,

    We originally noticed the problem on a 12.9” iPad Pro.

    Someone else had the problem on an old iPad 1 or 2, which would probably have been 9.7”

    I have also tried on an iPad air and it does the same thing.

    I’m getting a feeling that any iPad in landscape mode will do it.

    April 11, 2017 at 4:39 am #775766
    Ismael

    Hey!

    Did you try the css solution above? If it’s not working, use this:

    @media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1366px) { 
  .av-video-slide .mejs-mediaelement {
    display: none !important;
  }
}

    Cheers!
    Ismael

    April 12, 2017 at 1:17 pm #776622
    richardwilding

    Thanks Ismael,

    I’m afraid that when iPads are turned horizontally the problem still occurs after trying both these fixes.

    It seems to be a fairly universal problem on iPads

    Best wishes,
    Richard

    April 13, 2017 at 11:28 am #777181
    Ismael

    Hi!

    We modified the css code a bit. Please try it again.

    // https://kriesi.at/support/topic/full-width-easy-slider-video-on-ipad/#post-775766

    Cheers!
    Ismael

    April 13, 2017 at 3:02 pm #777321
    richardwilding

    Thanks Ismael,

    I’m afraid it’s still exactly the same

    April 16, 2017 at 4:09 am #778356
    Ismael

    Hi!

    In the screenshot, there are two images. Is one of those supposed to be the fallback image? I’m a bit confuse because I’m not sure if you can see the video in the iPad Pro device or not.

    // http://www.tonicanalytics.com/wp-content/uploads/2017/03/IMG_0186.jpg

    If possible, please hire a freelance developer to inspect the issue because we can’t reproduce the issue on our demo.

    Best regards,
    Ismael

    April 16, 2017 at 10:58 pm #778510
    richardwilding

    Dear Ismael,

    Both the large image and the small image are static, so it seems that the fallback image of the Full Width Easy Slider videos is being displayed twice, side by side, at large size and small size on iPads.

    I’ve had several people complain about this issue on both iPads and iPad Pros

    Thanks, Richard

    April 18, 2017 at 5:06 am #779052
    Ismael

    Hi!

    Thank you for the info.

    This is the first time that someone reported the issue so it’s most likely an issue with a plugin or a custom modification in a theme. Please try this css code instead.

    @media only screen
and (min-device-width : 768px)
and (max-device-width : 1366px) {
	.av-mobile-fallback-image:nth-child(0) {
		display: none !important;
	}
}

    If it doesn’t work, use this one.

    @media only screen
and (min-device-width : 768px)
and (max-device-width : 1366px) {
	.av-mobile-fallback-image:nth-child(1) {
		display: none !important;
	}
}

    If none of the code is working, please try the following css code to remove the fallback image completely.

    @media only screen
and (min-device-width : 768px)
and (max-device-width : 1366px) {
	.av-mobile-fallback-image {
		display: none !important;
	}
}

    Regards,
    Ismael

    April 18, 2017 at 10:57 pm #779696
    richardwilding

    Thanks Ismael,

    The first option resulted in a slight change in the rendering, but once drawn, the result is unchanged. The small unwanted image draws first, then the main image appears.

    The second and third options meant that the Full Width Easy Slider did not appear at all (neither the large image or the small duplicate image)

    All tested on a standard iPad running iOS 9.3.5

    April 19, 2017 at 4:51 am #779763
    Ismael

    Hey!

    Thank you for the update. I will ask the rest of the support team to check the issue.

    Cheers!
    Ismael

    April 20, 2017 at 10:51 am #780434
    richardwilding

    Thanks Ismael,

    Is there an alternative way I could achieve the full width video playing with text overlaid? To avoid this problem with the Full Width Easy slider on iPads.

    I’m getting desperate as the client won’t sign off on the project while this one bug is still happening.

    Best wishes,
    Richard

    April 21, 2017 at 6:37 am #780986
    Ismael

    Hey!

    Have you tried the color section’s background options? Can you reproduce the same issue on our demo?

    // http://kriesi.at/themes/enfold/homepage/home-v9-videos-and-parallax/

    Best regards,
    Ismael

  • Author
    Posts
Viewing 21 posts - 1 through 21 (of 21 total)
  • You must be logged in to reply to this topic.