I’ve created an online course in Lectora Inspire 17 that includes a number of video clips.
Each video clip has closed captions, which I’ve imported via VTT files. These captions show perfectly when viewed via a PC, but on mobile they are cut-off horizontally so that only the top half appears.
I’ve tried to re-position the captions higher by editing the VTT file, to no avail. I suspect Lectora’s CSS is overriding the settings, though I’ve looked there too and can’t seem to change it.
@rtracey4085 – I’ve created a custom CSS file that adjusts quite a few of the caption settings specific to the audio player that may be of help. The CSS differentiates the audio from the video based on a DIV, so if you look at my sample from the below post, I believe changing the div values to div from audio to video, it may work.
In fact, I’m pretty confident that it will, since when I had both an audio and video on a page without the div in the CSS, it blew up the video.
Mobile is not my forte, so I’d be in uncharted territory with any type of suggestion. Does it happen in all mobile browsers? Is it just the PC responsive design you’re using or the other options? This could help explain the potential differences. I did a quick Google search and found a couple of articles that call out iOS that might lead to inspiration for the more savvy coders.
We’ve added in LO the ability to have your captions left, centered, or right justified and we will be looking into adding it in Lectora Inspire/Publisher soon. We’ll also look into this thread further to see if it can result in future enhancements.