Re-positioning closed captions
August 23, 2017 12:00 AM
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.
Any ideas?
Discussion (6)
@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.
Customizing closed captions on audio
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.
Oh no, I celebrated too soon!
While the captions have re-positioned on PC, they're still cut-off on iPhone :(
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.
Optimizing Web Content (Apple's developer site)
How to configure mobile Safari... (Talks about conditional CSS)
My initial guess is that you'll need to adjust the CSS for different views, since the width and positioning of a video for mobile browsers is likely to be different than that on a PC.
Thanks Jason. You've got me wondering if the CSS that I've edited is the code for the PC, and there may be other code that applies to the small screen. I'll look into it.
Jennifer, those justification enhancements will be very welcome, but please note this specific issue concerns the vertical position of the caption.
undefined
Discussions have been disabled for this post