3

I have a closed caption video embedded from YouTube on my website that will show the captions when viewing in Safari on a desktop computer. When I view the web page in Safari on iPhone 6, the captions do not show.

I have clicked the little icon in the bottom right of bottom grey bar for "Subtitles and CC" and have it set to "English".

I have set my iPhone settings > General > Accessibility > Media > Subtitles & Captioning to on and default type.

  • Clicking the video and viewing it with the YouTUBE app on my iPhone will show the captions but I would also like them to show when viewing from the webpage directly.

Not sure if this is an iPhone issue, Safari issue, YouTube issue or if it requires a simple edit to the iframe/embed code on my webpage.

I do have "&cc_load_policy=1" as part of my src tag.

  • iOS/Safari and iOS/Chrome also do NOT show closed captions for video-js videos on webpage either.

Anyone out there run into this?

Improve this question
5
  • This is most likely a problem with the way web embedded video plays back on iOS devices. Is the video iframed only on the web page, or are you iframing a video-js player connected to the YouTube video? Which version of video-js are you using?
    – kenjikato
    Commented Jan 14, 2016 at 1:04
  • I have a youtube video embedded with iframe and then another video on our server in a div using video-js. video-js is 4.3.0
    – sloga
    Commented Jan 14, 2016 at 16:26
  • One other question, are you looking to do this for ANY video (nearly impossible), or only videos that you control the encoding of?
    – kenjikato
    Commented Jan 14, 2016 at 23:43
  • only videos we control and they are all mp4
    – sloga
    Commented Jan 20, 2016 at 18:12
  • do you know if the videos are CAE-608 encoded? Are you going to be hosting the videos yourself, or using Youtube? Did you try the web page I put in my answer below to see if it works for you?
    – kenjikato
    Commented Jan 21, 2016 at 0:18

1 Answer 1

Reset to default
1

First you need to understand that there are a couple of ways that Closed Captioning can be added to a video. If you are looking at iOS specifically, then the video must conform to the CEA-608 encoding standard, and needs to be either a HTTP Live Stream (HLS) or MP4 video. Other video formats WON’T work on iOS as an embedded video if you need CC playback.

If the video meets one of those to standards, then it’s about the playback setting that are set for the HTML5 web page.

If you are looking to embed a YouTube video on your page. You need to verify that the video has an existing Closed Caption track (not one of the on the fly automatically translated ones).

Below is an example of a web page that should play back a movie trailer for “The Martian” that has had a Closed Caption track created for it.

I have verified this page works on my desktop Mac with Safari and Chrome, a Windows 7 laptop with Chrome, an iPhone 6 with iOS 9.2, and an iPad Air with iOS 8.4.1.

<!DOCTYPE html>
<html lang="en">
    <head>
    </head>
    <body>
        <div style="overflow:hidden;height:270px;width:400px;">
            <div id="youtube_canvas" style="height:270px;width:400px;">
                <iframe style="height:270px;width:400px;border:0;" frameborder="0" src="https://www.youtube.com/embed/aIL01wrwq6w?hl=en&amp;autoplay=1&amp;cc_load_policy=1&amp;loop=0&amp;fs=1&amp;showinfo=0"></iframe>
            </div>
            <style>#youtube_canvas img{max-width:none!important;background:none!important}</style>
        </div>
    </body>
</html>

The key code bit for YouTube videos is the &cc_load_policy=1 you already have found.

But if the video you have linked to does not meet the original video specs, then you will never see CC text in iOS. The native YouTube player will play back videos not in the CAE-608 standard, but iOS through a web player will not.

If you need to do this for your own videos, then you need to make sure your encode creates a CEA-608 embedded CC track.

I hope this helps.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .