Video Layering Issue on iOS, Ipad

heidi

we published a course using Lectora Inspire with multiple videos. They work fine on every browser, except the iPad where they are showing up ON TOP of everything (despite our layering set up in Lectora to be in the back) and they show up with a CONTROLLER (despite our checking NONE in Lectora).  See attached screen shots. You can see the difference between Chrome and the iPad. We opted to use the font on our Lectora page rather than the GoAnimate video so we could have an exact font match. Any help would really be appreciated! Thanks, Heidi

jasonadal

What are the original dimensions of the video and/or the dimensions in the course? It's possible this is a Safari specific issue if the Chrome screen shot is from Chrome on the iPad. Testing with Chrome or Firefox on the iPad could help narrow down (or, worst case scenario, expand) the likely culprit(s).

My other initial thought is wonder if you are using responsive design and have a version for landscape tablet. Just some initial thoughts, as designing one site for both desktop and mobile has its perils.

heidi

Hi, thanks for the response. First, the Chrome screenshots are not from an iPad, they are from a desktop. The width and height of each video, as exported from GoAnimate, is 962  x541 at 720p. We are using responsive design and have  a version for landscape tablet. But the layering issue will occur on that version as well. Thanks, Heidi

mnotermans5114

I do think this is Ipad specific and not directly an Lectora issue. You can get video in the background on iPad, but you need to get that done like this.

In http://www.develooping.com/canvas-video-player/ you can see a responsive mp4 background working in iPad/iPhones. Download the code from http://www.develooping.com/wp-content/uploads/2016/04/html-canvas-video-player.zip

This is a must read when using video on iPad/iOS.
https://webkit.org/blog/6784/new-video-policies-for-ios/

Regards,

Math

mnotermans5114

Who knows me a little by now, might suspect i couldnot resist doublechecking this and trying it myself. Either i do misunderstand Heidi's question or its some different approach, but i could add a video in the background of a page and add both a png and text on top of it without any problem. Showing on all devices and browsers as wanted.

Adding my test here... and you can check the online version on ipad or iphone: http://www.mathnotermans.nl/LectoraSamples/VideoOnTop

Regards,

Math

 

heidi

Math, thank you for taking the time to test the issue and post responses. My team is working on finding a resolution. We continue to get layering issues from our Course Testers on the ipad and the android tablet, when the course is published to either ReviewLink or the client LMS.

One of my developers has noted that when published to HTML and posted on their server, they did NOT get the layering issue on the iPad. So...we still are doing trial and errors AND waiting on Trivantis Support to give us specific answers to this problem.

We still would appreciate any feedback from others...thank you!