Re-positioning closed captions

rtracey4085
rtracey4085 Community Member Posts: 4
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?

Comments

  • jasonadal
    jasonadal Community Member Posts: 441 ♪ Opening Act ♪
    @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
  • rtracey4085
    rtracey4085 Community Member Posts: 4
    Hurrah!

    Thanks Jason!!
  • rtracey4085
    rtracey4085 Community Member Posts: 4
    Oh no, I celebrated too soon!

    While the captions have re-positioned on PC, they're still cut-off on iPhone :(
  • jasonadal
    jasonadal Community Member Posts: 441 ♪ Opening Act ♪
    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.
  • jvalley4735
    jvalley4735 Community Member Posts: 1,357
    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.
  • rtracey4085
    rtracey4085 Community Member Posts: 4
    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.