Handling Captions via the YouTube Player API

Question

I'm trying to change a Youtube video caption Color & Background via javascript but having no success. I was using this guide http://terrillthompson.com/blog/648 and Youtube's reference https://developers.google.com/youtube/iframe_api_reference

Edit: Adding one image example of the settings I want to handle with.

Here's all whole script: (I already tried color on function onPlayerReady(event) before using background as you can see below)

<script src="http://www.youtube.com/player_api"></script>
<script>   
    // create youtube player
    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          height: '800',
          width: '518',
          videoId: 'DHPWtmZ3USs',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          },
          playerVars: {
                cc_load_policy: 1,
                fs: 1,
                controls: 0,
                showinfo: 0,
                autoplay: 0,
                rel: 0,
                hl: 'pt-br',
                color: 'white'
        }
        });
    }
        function onPlayerReady(event) {
            player.getOptions("captions") || player.getOptions("cc")  //detects if captions were ever loaded at one point.
            player.setOption("captions", "displaySettings", {"background": "#fff"});  //Works for html5 ignored by AS3
            player.setOption("cc", "displaySettings", {"background": "#fff"});  //Works for AS3 ignored by html5
        }

    // when video ends
    function onPlayerStateChange(event) {        
        if (event.data == YT.PlayerState.PLAYING) {
                $('#videoshadow').addClass('on');
            }
            else if (event.data == YT.PlayerState.PAUSED) {
                $('#videoshadow').removeClass('on');
            }
            else if (event.data == YT.PlayerState.ENDED) {
                $('#videoshadow').removeClass('on');
            }               
    }
</script>

And Html:

<div id="player"></div>

I'm not finding anything more about this on web. Thanks for help!

Answer 1

Did you look at this tutorial? youtube

and this is a little code to change borders... Is this what you want?

 <iframe id="video"
        width="640" height="360"
        src="https://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1"
        frameborder="0"
        style="border: solid 50px #37474F"></iframe>

and a script:

var tag2 = document.createElement('script');
tag2.id = 'iframe-demo';
tag2.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag2 = document.getElementsByTagName('script')[0];
firstScriptTag2.parentNode.insertBefore(tag2, firstScriptTag2);

var player;
function onYouTubeIframeAPIReady() {
  player = new YT.Player('video', {
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
});
}
function onPlayerReady(event) {
  document.getElementById('video').style.borderColor = '#FF6D00';
}
function changeBorderColor(playerStatus) {
  var color;
  if (playerStatus == -1) {
  color = "#37474F"; // unstarted = gray
} else if (playerStatus == 0) {
  color = "#FFFF00"; // ended = yellow
} else if (playerStatus == 1) {
  color = "#33691E"; // playing = green
} else if (playerStatus == 2) {
  color = "#DD2C00"; // paused = red
} else if (playerStatus == 3) {
  color = "#AA00FF"; // buffering = purple
} else if (playerStatus == 5) {
  color = "#FF6DOO"; // video cued = orange
}
if (color) {
  document.getElementById('video').style.borderColor = color;
}
}
function onPlayerStateChange(event) {
  changeBorderColor(event.data);
}