IPhone – How to configure mobile Safari to show closed captions on videos in webpage

accessibilityiphonesafarivideoyoutube

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?

Best Answer

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.

Related Question